/* Theme Name: Barn Peptides Replica Theme URI: https://barnpeptide.local Description: Authorized WooCommerce replica of barnpeptides.com. Classic theme, Tailwind-compiled CSS + Alpine.js, matching the source's custom barn-peptides-theme. Version: 1.0.0 Author: Tuju pipeline Text Domain: barnpeptide */ /* ---------------------------------------------------------------------------- Supplementary rules. The bulk of the design lives in assets/css/barn-compiled.css (the source's own compiled Tailwind + theme CSS), enqueued first. This file holds only build-specific additions/overrides and WooCommerce resets that must beat Woo's own high-specificity selectors. ------------------------------------------------------------------------- */ :root{ --bp-brown:#7B4B2A; --bp-brown-light:#946241; --bp-brown-dark:#5A351D; --bp-navy:#0F172A; --bp-navy-deep:#020617; --bp-cream:#F8F5F0; --bp-text:#111827; --bp-muted:#6B7280; } html{scroll-padding-top:110px} body{background:#F8F5F0;color:#111827;font-family:Inter,sans-serif} .barn-live-text{display:inline} /* ---- Comfortable side gutters on mobile — content never hugs the screen edge. All centred max-width containers get a wider gutter below the sm breakpoint. ---- */ @media (max-width:639px){ [class*="max-w-"].mx-auto{padding-left:22px !important;padding-right:22px !important} } /* ---- Trust strip: tighten on mobile so labels don't wrap awkwardly ---- */ @media (max-width:640px){ .bp-trust{column-gap:10px !important;row-gap:18px !important} .bp-trust .pl-8{padding-left:12px !important} /* was 32px on the right column */ .bp-trust > div > * + *{margin-left:10px !important} /* tighten the icon↔text space */ .bp-trust .w-12.h-12{width:38px !important;height:38px !important;flex:0 0 38px} .bp-trust .w-12.h-12 svg{width:18px !important;height:18px !important} .bp-trust .text-\[13px\]{font-size:11px !important;letter-spacing:.02em !important;line-height:1.25} .bp-trust .text-\[10px\]{letter-spacing:0 !important;line-height:1.2} } /* keep Alpine-hidden nodes hidden before Alpine boots */ [x-cloak]{display:none !important} /* ---- WooCommerce chrome we deliberately suppress (source has none) ---- The source archive has NO result count, NO sort dropdown, NO sidebar, NO pagination. Hide any that Woo injects as a safety net; templates also omit them. (LAW: stock Woo UI is a defect until proven to match source.) */ .woocommerce .woocommerce-result-count, .woocommerce .woocommerce-ordering, .woocommerce nav.woocommerce-pagination{display:none !important} /* Woo notices restyled to the brand */ .woocommerce-message,.woocommerce-info,.woocommerce-error,.woocommerce-noreviews, ul.woocommerce-error{ border-top-color:var(--bp-brown) !important;border-radius:14px; font-family:Inter,sans-serif} .woocommerce-message::before,.woocommerce-info::before{color:var(--bp-brown) !important} /* Kill the ul.products ::before/::after clearfix that becomes a grid item (VISUAL-FIDELITY trap 5) wherever we use a CSS grid for products. */ .bp-grid.products::before,.bp-grid.products::after{content:none !important;display:none !important} /* Woo button skin outranks card CTAs on any body.woocommerce page; neutralise so our dark/brown CTAs win sitewide (lilipeptide trap). */ .woocommerce a.button,.woocommerce button.button,.woocommerce input.button, .woocommerce #respond input#submit,.woocommerce a.button.alt,.woocommerce button.button.alt{ background:#111827;color:#fff;border-radius:12px;font-weight:900; text-transform:uppercase;letter-spacing:.08em;border:none} .woocommerce a.button:hover,.woocommerce button.button:hover, .woocommerce input.button:hover,.woocommerce a.button.alt:hover, .woocommerce button.button.alt:hover{background:var(--bp-brown);color:#fff} /* Minimum-order shortfall notice under cart totals */ .bp-min-order-notice{margin:14px 0 0;padding:14px 16px;border-radius:12px; background:#FEF3F2;border:1px solid #FECDCA;color:#B42318;font-size:14px; font-weight:700;line-height:1.5} /* ---- Related products: grid of our shared cards ---- */ .related.products,.up-sells.products{margin-top:16px} .related.products > h2,.up-sells.products > h2{font-size:28px;font-weight:900; text-transform:uppercase;letter-spacing:-.01em;color:#111827;margin:0 0 28px} .related.products ul.products,.up-sells.products ul.products{ display:grid;grid-template-columns:repeat(4,1fr);gap:24px;margin:0;padding:0;list-style:none} .related.products ul.products::before,.related.products ul.products::after{content:none !important;display:none !important} .related.products ul.products li.product,.up-sells.products ul.products li.product{ width:auto !important;margin:0 !important;float:none !important;padding:0 !important} @media (max-width:1024px){.related.products ul.products{grid-template-columns:repeat(2,1fr)}} @media (max-width:640px){.related.products ul.products{grid-template-columns:1fr}} /* ---------------------------------------------------------------------------- Responsive grid/col utilities our NET-NEW layouts use (checkout, cart, calculator, contact, journal). The source's compiled Tailwind only contains the classes the SOURCE itself used, so `lg:col-span-2`, `lg:grid-cols-3`, etc. were absent and those layouts collapsed. Defined here (loaded after the compiled CSS) so they always resolve. Tailwind breakpoints: sm640 md768 lg1024 xl1280. ------------------------------------------------------------------------- */ @media (min-width:640px){ .sm\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))} .sm\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))} } @media (min-width:768px){ .md\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))} .md\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))} .md\:grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))} } @media (min-width:1024px){ .lg\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))} .lg\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))} .lg\:grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))} .lg\:col-span-1{grid-column:span 1/span 1} .lg\:col-span-2{grid-column:span 2/span 2} .lg\:col-span-3{grid-column:span 3/span 3} } @media (min-width:1280px){ .xl\:grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))} } /* ---------------------------------------------------------------------------- Checkout + cart layout — explicit CSS grid so it never depends on whether the source's compiled Tailwind happened to include lg:col-span-* (it didn't). 2:1 on desktop, single column on mobile; trimmed card padding so content fits. ------------------------------------------------------------------------- */ .bp-checkout-grid{display:grid;grid-template-columns:1fr;gap:18px;align-items:start} @media (min-width:1024px){ .bp-checkout-grid{grid-template-columns:minmax(0,1.9fr) minmax(0,1fr);gap:28px} } /* give the checkout a little more room than max-w-5xl so two columns breathe */ .woocommerce-checkout .max-w-5xl,.woocommerce-cart .max-w-7xl{max-width:75rem} /* trim the heavy p-8 inner cards (0,2,0 beats the .p-8 utility) — tighter on phones */ .bp-checkout-grid .bg-white,.bp-checkout-grid .cart_totals{padding:18px} @media (min-width:768px){ .bp-checkout-grid .bg-white,.bp-checkout-grid .cart_totals{padding:28px} } /* order summary: compact rows, no overflow of the shipping label in a narrow column */ #order_review .shop_table{font-size:14px;margin:0} #order_review .shop_table th,#order_review .shop_table td{padding:8px 0;word-break:normal} #order_review .shop_table .cart_item td{padding:4px 0} .bp-ckcol-side .sticky,.bp-ckcol-side > div{position:static} @media (min-width:1024px){ .bp-ckcol-side > div{position:sticky;top:24px} } /* The shared card shell (source .premium-card) */ .premium-card{background:#fff;border:1px solid #f1f1f1;border-radius:18px; box-shadow:0 10px 30px -18px rgba(15,23,42,.18);transition:box-shadow .2s,border-color .2s} .premium-card:hover{border-color:#C19A6B;box-shadow:0 18px 40px -18px rgba(123,75,42,.3)} /* ---- Prose for content pages / PDP description / SEO zone ---- */ .bp-prose h2{font-size:28px;font-weight:900;color:#111827;margin:1.6em 0 .5em;line-height:1.2} .bp-prose h3{font-size:22px;font-weight:800;color:#111827;margin:1.4em 0 .5em} .bp-prose h4{font-size:17px;font-weight:800;color:#111827;margin:1.2em 0 .4em;text-transform:uppercase;letter-spacing:.04em} .bp-prose p{margin:0 0 1.1em} .bp-prose a{color:#7B4B2A;text-decoration:underline;font-weight:600} .bp-prose ul,.bp-prose ol{margin:0 0 1.1em 1.4em} .bp-prose li{margin:.35em 0} .bp-prose strong{color:#111827;font-weight:800} /* Scope prose link colour to real content links, never action buttons that may sit nearby. */ .bp-prose a.btn-premium,.bp-prose a[class*="bg-["]{color:#fff} /* Cart action buttons — force correct text colour regardless of any theme link rule. */ .cart_totals a[href*="checkout"]{color:#fff !important} .cart_totals a[href*="checkout"]:hover{color:#fff !important} /* ---- Checkout fields (staged funnel) ---- CSS grid, not floats — floats lose a specificity fight with WooCommerce's own `.woocommerce form .form-row-first{width:47%;float:left}`. width:auto !important kills Woo's width so the grid controls sizing; inputs then fill their cell. */ .bp-checkout-fields{display:grid;grid-template-columns:1fr 1fr;column-gap:16px} .bp-checkout-fields .form-row{grid-column:1 / -1;width:auto !important;float:none !important; margin:0 0 16px;padding:0;box-sizing:border-box} .bp-checkout-fields .form-row-first{grid-column:1 / 2} .bp-checkout-fields .form-row-last{grid-column:2 / 3} /* WooCommerce wraps each input in this span — make it full-width or the input shrinks. */ .bp-checkout-fields .woocommerce-input-wrapper{display:block;width:100%} .bp-checkout-fields label{display:block;font-size:12px;font-weight:800;text-transform:uppercase; letter-spacing:.03em;color:#374151;margin:0 0 6px} .bp-checkout-fields .required{color:#B91C1C;border:none} /* On phones, stack everything to one column (two name fields side-by-side is cramped). */ @media (max-width:640px){ .bp-checkout-fields{grid-template-columns:1fr} .bp-checkout-fields .form-row-first,.bp-checkout-fields .form-row-last{grid-column:1 / -1} } .bp-checkout-fields input.input-text,.bp-checkout-fields textarea{width:100%;padding:13px 14px; border:2px solid #e5e7eb;border-radius:12px;font-size:15px;font-family:Inter,sans-serif;background:#fff;color:#111827} .bp-checkout-fields input.input-text:focus,.bp-checkout-fields textarea:focus{outline:none;border-color:#7B4B2A} /* Native