/* True Pet Kitchens — brand layer over Hello Elementor + WooCommerce. Brand: navy #23396E, pink #E86C7D, Rubik (client brand files, Oct 2026). */ :root { --tpk-navy: #23396e; --tpk-navy-dark: #1a2b54; --tpk-pink: #e86c7d; --tpk-pink-dark: #c9475a; /* AA on white for text-size use */ --tpk-cream: #faf6f0; --tpk-ink: #1f2433; --tpk-muted: #5b6275; --tpk-line: #e6e1d8; --tpk-white: #fff; --tpk-radius: 10px; --tpk-max: 1240px; --tpk-font: "Rubik", system-ui, -apple-system, "Segoe UI", sans-serif; } body { font-family: var(--tpk-font); color: var(--tpk-ink); background: var(--tpk-white); line-height: 1.6; } h1, h2, h3, h4 { font-family: var(--tpk-font); color: var(--tpk-navy); line-height: 1.2; font-weight: 600; } a { color: var(--tpk-navy); } a:hover, a:focus { color: var(--tpk-pink-dark); } img { max-width: 100%; height: auto; } .tpk-center { text-align: center; } /* Buttons — also restyles WooCommerce buttons so the store reads as one system. */ .tpk-btn, .woocommerce a.button, .woocommerce button.button, .woocommerce input.button, .woocommerce #respond input#submit, .woocommerce a.button.alt, .woocommerce button.button.alt, .wc-block-components-button:not(.is-link) { display: inline-block; background: var(--tpk-navy); color: var(--tpk-white); border: 2px solid var(--tpk-navy); border-radius: var(--tpk-radius); padding: .8em 1.6em; font-family: var(--tpk-font); font-weight: 500; font-size: .95rem; letter-spacing: .04em; text-transform: uppercase; text-decoration: none; line-height: 1.2; transition: background-color .15s, border-color .15s, color .15s; } .tpk-btn:hover, .tpk-btn:focus, .woocommerce a.button:hover, .woocommerce button.button:hover, .woocommerce input.button:hover, .woocommerce a.button.alt:hover, .woocommerce button.button.alt:hover { background: var(--tpk-navy-dark); border-color: var(--tpk-navy-dark); color: var(--tpk-white); } .tpk-btn--ghost { background: transparent; color: var(--tpk-navy); } .tpk-btn--ghost:hover, .tpk-btn--ghost:focus { background: var(--tpk-navy); color: var(--tpk-white); } :focus-visible { outline: 3px solid var(--tpk-pink); outline-offset: 2px; } /* ---------- Header ---------- */ .tpk-announce { background: var(--tpk-navy); color: var(--tpk-white); text-align: center; font-size: .85rem; padding: .45rem 1rem; letter-spacing: .02em; } .tpk-header { background: var(--tpk-white); border-bottom: 1px solid var(--tpk-line); position: relative; z-index: 50; } .tpk-header__bar { max-width: var(--tpk-max); margin: 0 auto; padding: .75rem 1rem; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; } .tpk-header__logo { grid-column: 2; display: block; } .tpk-header__logo img { width: 220px; height: auto; display: block; } .tpk-header__icons { grid-column: 3; justify-self: end; display: flex; gap: .25rem; align-items: center; } .tpk-icon, .tpk-header__toggle { background: none; border: 0; padding: .5rem; color: var(--tpk-navy); cursor: pointer; display: inline-flex; align-items: center; position: relative; border-radius: 8px; } .tpk-header__toggle { grid-column: 1; justify-self: start; display: none; } .tpk-icon:hover, .tpk-header__toggle:hover { color: var(--tpk-pink-dark); background: var(--tpk-cream); } .tpk-cart__count { position: absolute; top: 0; right: -2px; min-width: 18px; height: 18px; padding: 0 4px; border-radius: 9px; background: var(--tpk-pink-dark); color: var(--tpk-white); font-size: .7rem; font-weight: 600; line-height: 18px; text-align: center; } .tpk-cart__count[data-count="0"] { display: none; } .tpk-search { max-width: 640px; margin: 0 auto; padding: 0 1rem 1rem; } .tpk-search form { display: flex; gap: .5rem; } .tpk-search input[type="search"] { flex: 1; border: 1px solid var(--tpk-line); border-radius: var(--tpk-radius); padding: .7rem 1rem; font: inherit; } .tpk-search button { background: var(--tpk-navy); color: #fff; border: 0; border-radius: var(--tpk-radius); padding: 0 1.2rem; font: inherit; } .tpk-nav { border-top: 1px solid var(--tpk-line); } .tpk-nav__list { list-style: none; margin: 0 auto; padding: 0 1rem; max-width: var(--tpk-max); display: flex; justify-content: center; flex-wrap: wrap; } .tpk-nav__list > li { position: relative; } .tpk-nav__list a { display: block; padding: .85rem 1.1rem; color: var(--tpk-navy); text-decoration: none; font-weight: 500; font-size: .92rem; letter-spacing: .05em; text-transform: uppercase; } .tpk-nav__list a:hover, .tpk-nav__list .current-menu-item > a { color: var(--tpk-pink-dark); } .tpk-nav__list .sub-menu { list-style: none; margin: 0; padding: .5rem 0; position: absolute; left: 0; top: 100%; min-width: 220px; background: #fff; border: 1px solid var(--tpk-line); border-radius: var(--tpk-radius); box-shadow: 0 10px 30px rgba(35, 57, 110, .12); display: none; } .tpk-nav__list li:hover > .sub-menu, .tpk-nav__list li:focus-within > .sub-menu { display: block; } .tpk-nav__list .sub-menu a { text-transform: none; letter-spacing: 0; padding: .5rem 1.1rem; } @media (max-width: 900px) { .tpk-header__toggle { display: inline-flex; } .tpk-header__logo img { width: 160px; } .tpk-nav { display: none; } .tpk-nav.is-open { display: block; } .tpk-nav__list { flex-direction: column; padding: .5rem 0; } .tpk-nav__list a { padding: .8rem 1.25rem; } .tpk-nav__list .sub-menu { position: static; display: block; border: 0; box-shadow: none; padding: 0 0 0 1rem; } } /* ---------- Homepage ---------- */ .tpk-home { overflow-x: clip; } .tpk-section { max-width: var(--tpk-max); margin: 0 auto; padding: 4rem 1rem; } .tpk-section__title { text-align: center; font-size: clamp(1.6rem, 3vw, 2.2rem); margin: 0 0 2rem; } .tpk-hero { position: relative; min-height: 560px; display: flex; align-items: center; background: var(--tpk-cream); } .tpk-hero__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 70% center; } .tpk-hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(255,255,255,.95) 0%, rgba(255,255,255,.85) 35%, rgba(255,255,255,0) 62%); } .tpk-hero__content { position: relative; z-index: 1; max-width: var(--tpk-max); width: 100%; margin: 0 auto; padding: 3rem 1rem; } .tpk-hero__content > * { max-width: 520px; } .tpk-hero h1 { font-size: clamp(2rem, 4.4vw, 3.3rem); margin: 0 0 1rem; } .tpk-hero p { font-size: 1.15rem; color: var(--tpk-ink); margin: 0 0 1.75rem; } @media (max-width: 760px) { .tpk-hero { min-height: 0; flex-direction: column; align-items: stretch; } .tpk-hero__img { position: static; height: 260px; } .tpk-hero::after { display: none; } .tpk-hero__content { padding: 2rem 1rem 2.5rem; } } .tpk-trust { background: var(--tpk-navy); color: #fff; } .tpk-trust ul { list-style: none; margin: 0 auto; padding: 1.5rem 1rem; max-width: var(--tpk-max); display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.25rem; } .tpk-trust li { display: flex; align-items: center; gap: .9rem; text-transform: uppercase; letter-spacing: .05em; font-size: .9rem; font-weight: 500; } .tpk-trust img { width: 56px; height: 56px; flex: none; } @media (max-width: 760px) { .tpk-trust ul { grid-template-columns: repeat(2, 1fr); } .tpk-trust img { width: 44px; height: 44px; } .tpk-trust li { font-size: .8rem; } } .tpk-cats__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; } .tpk-cat { display: flex; flex-direction: column; align-items: center; gap: 1rem; text-decoration: none; } .tpk-cat img { aspect-ratio: 1; object-fit: contain; width: 100%; background: #fff; border-radius: var(--tpk-radius); transition: transform .25s; } .tpk-cat:hover img { transform: translateY(-4px); } .tpk-cat .tpk-btn { width: 100%; text-align: center; } @media (max-width: 760px) { .tpk-cats__grid { grid-template-columns: repeat(3, 1fr); gap: .6rem; } .tpk-cat { gap: .5rem; } .tpk-cat .tpk-btn { font-size: .62rem; padding: .7em .4em; letter-spacing: .02em; } } .tpk-favourites, .tpk-recommended { padding-top: 1rem; } .tpk-quote { display: grid; grid-template-columns: 200px 1fr; gap: 3rem; align-items: center; max-width: 1000px; } .tpk-quote img { width: 100%; max-width: 200px; aspect-ratio: 1; object-fit: cover; border-radius: 50%; } .tpk-quote blockquote { margin: 0; border: 0; padding: 0; } .tpk-quote blockquote p { font-size: clamp(1.3rem, 2.6vw, 1.9rem); font-weight: 600; color: var(--tpk-navy); line-height: 1.3; margin: 0 0 1rem; } .tpk-quote cite { font-style: normal; font-weight: 500; color: var(--tpk-muted); } @media (max-width: 760px) { .tpk-quote { grid-template-columns: 1fr; text-align: center; gap: 1.5rem; } .tpk-quote img { max-width: 160px; margin: 0 auto; } } .tpk-story { display: grid; gap: 4rem; } .tpk-split { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; align-items: center; } .tpk-split img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--tpk-radius); } .tpk-split--flip .tpk-split__text { order: 2; } .tpk-split__text h2 { font-size: clamp(1.5rem, 2.8vw, 2rem); margin: 0 0 1rem; } .tpk-split__text p { font-size: 1.1rem; margin: 0 0 1.25rem; } @media (max-width: 760px) { .tpk-split { grid-template-columns: 1fr; gap: 1.5rem; } .tpk-split--flip .tpk-split__text { order: 0; } .tpk-split img { aspect-ratio: 4 / 3; } } /* ---------- Product grid (WooCommerce loop) ---------- */ .woocommerce ul.products li.product, .woocommerce-page ul.products li.product { position: relative; text-align: center; } .woocommerce ul.products li.product a img { border-radius: var(--tpk-radius); background: #fff; aspect-ratio: 1; object-fit: cover; } .woocommerce ul.products li.product .woocommerce-loop-product__title { color: var(--tpk-navy); font-size: 1rem; font-weight: 500; padding: .6rem 0 .2rem; } .woocommerce ul.products li.product .price { color: var(--tpk-ink); font-weight: 500; } .woocommerce ul.products li.product .price del { color: var(--tpk-muted); } .woocommerce ul.products li.product .price ins { color: var(--tpk-pink-dark); text-decoration: none; } .woocommerce ul.products li.product .button { margin-top: .6rem; font-size: .8rem; padding: .7em 1.2em; } .woocommerce span.onsale { background: var(--tpk-pink-dark); border-radius: 999px; min-height: 0; min-width: 0; padding: .35em .8em; line-height: 1.2; font-weight: 600; } /* Badges (inc/badges.php) */ .tpk-badges { position: absolute; top: .6rem; left: .6rem; z-index: 2; display: flex; flex-direction: column; gap: .3rem; align-items: flex-start; } .single-product .tpk-badges { position: static; flex-direction: row; margin: 0 0 .75rem; } .tpk-badge { background: var(--tpk-navy); color: #fff; font-size: .72rem; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; padding: .3em .7em; border-radius: 999px; } .tpk-badge--new-arrival { background: var(--tpk-pink-dark); } .tpk-badge--seasonal { background: #0b7a6c; } /* ---------- Single product ---------- */ .single-product div.product .product_title { font-size: clamp(1.6rem, 3vw, 2.3rem); } .single-product div.product p.price, .single-product div.product span.price { color: var(--tpk-ink); font-size: 1.4rem; font-weight: 500; } /* Store Booster free-shipping bar picks up the brand. */ .lsb-freeship { border-radius: var(--tpk-radius); } /* ---------- Content pages (Our Story, Farmers Markets, policies) ---------- */ .page .site-main .page-header .entry-title { text-align: center; font-size: clamp(2rem, 4vw, 2.8rem); margin: 2.5rem 0 1.5rem; } /* Prose width for content pages only — cart, checkout and account need the full width. */ .page:not(.woocommerce-cart):not(.woocommerce-checkout):not(.woocommerce-account) .site-main .page-content { max-width: 72ch; margin: 0 auto 3rem; font-size: 1.05rem; } .page .site-main .page-content h2 { margin: 2.2rem 0 .8rem; font-size: 1.5rem; } .page .site-main .page-content h3 { margin: 1.4rem 0 .3rem; font-size: 1.15rem; } .tpk-lead { font-size: 1.25rem; color: var(--tpk-navy); font-weight: 500; } .tpk-checks { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: .6rem 1.5rem; } .tpk-checks li::before { content: "✓"; color: var(--tpk-pink-dark); font-weight: 700; margin-right: .5rem; } /* Hello's own header/footer must never render under ours. */ #site-header.site-header, #site-footer.site-footer { display: none; } /* Product details (inc/product-details.php) */ .tpk-line { display: inline-block; margin: 0 0 .5rem; padding: .25em .75em; border-radius: 999px; background: var(--tpk-line-colour, var(--tpk-navy)); color: #fff; font-size: .75rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; } .tpk-benefits { display: flex; align-items: center; gap: .5rem; margin: 0 0 1.25rem; padding: .7rem 1rem; background: var(--tpk-cream); border: 1px solid var(--tpk-line); border-radius: 10px; color: var(--tpk-navy); font-weight: 500; font-size: .95rem; } .tpk-benefits svg { flex: none; color: #1f8a5b; } .single-product div.product .woocommerce-product-details__short-description { color: var(--tpk-muted); font-size: 1.05rem; } .tpk-analysis { list-style: none; padding: 0; margin: 0 0 1rem; border-top: 1px solid var(--tpk-line); max-width: 520px; } .tpk-analysis li { padding: .5rem 0; border-bottom: 1px solid var(--tpk-line); } /* Category pages (inc/categories.php) */ .tax-product_cat .woocommerce-products-header { text-align: center; max-width: 760px; margin: 1.5rem auto 2rem; } .tax-product_cat .woocommerce-products-header__title { font-size: clamp(1.9rem, 4vw, 2.6rem); } .tax-product_cat .term-description { color: var(--tpk-muted); font-size: 1.05rem; } .tpk-filter { display: flex; flex-wrap: wrap; gap: .5rem; justify-content: center; margin: 0 0 1.75rem; clear: both; } .tpk-filter a { border: 1px solid var(--tpk-line); border-radius: 999px; padding: .4em 1em; text-decoration: none; font-size: .9rem; font-weight: 500; color: var(--tpk-navy); background: #fff; } .tpk-filter a:hover { border-color: var(--tpk-navy); } .tpk-filter a[aria-current="true"] { background: var(--tpk-navy); border-color: var(--tpk-navy); color: #fff; } /* FAQ / content helpers */ .tpk-faq { border-bottom: 1px solid var(--tpk-line); padding: .9rem 0; } .tpk-faq summary { cursor: pointer; font-weight: 600; color: var(--tpk-navy); list-style: none; display: flex; justify-content: space-between; gap: 1rem; } .tpk-faq summary::-webkit-details-marker { display: none; } .tpk-faq summary::after { content: "+"; font-size: 1.3rem; line-height: 1; color: var(--tpk-pink-dark); } .tpk-faq[open] summary::after { content: "–"; } .tpk-faq p { margin: .6rem 0 0; } .tpk-fine { font-size: .85rem; color: var(--tpk-muted); margin-top: 2rem; } /* ===================================================================== v2 — motion, footer, notices, drawer, product accordion, cart, checkout ===================================================================== */ /* ---------- Motion ---------- */ .tpk-js .tpk-reveal { opacity: 0; transform: translateY(24px); transition: opacity .7s ease, transform .7s cubic-bezier(.2,.7,.2,1); } .tpk-js .tpk-reveal.is-visible { opacity: 1; transform: none; } .tpk-js .tpk-cats__grid > *, .tpk-js .tpk-reveal ul.products > li { transition: opacity .6s ease, transform .6s cubic-bezier(.2,.7,.2,1); } .tpk-js .tpk-reveal:not(.is-visible) .tpk-cats__grid > *, .tpk-js .tpk-reveal:not(.is-visible) ul.products > li { opacity: 0; transform: translateY(16px); } .tpk-js .tpk-reveal.is-visible .tpk-cats__grid > *:nth-child(2), .tpk-js .tpk-reveal.is-visible ul.products > li:nth-child(2) { transition-delay: .08s; } .tpk-js .tpk-reveal.is-visible .tpk-cats__grid > *:nth-child(3), .tpk-js .tpk-reveal.is-visible ul.products > li:nth-child(3) { transition-delay: .16s; } .tpk-js .tpk-reveal.is-visible ul.products > li:nth-child(4) { transition-delay: .24s; } .tpk-hero__content > * { animation: tpk-rise .8s cubic-bezier(.2,.7,.2,1) both; } .tpk-hero__content > *:nth-child(2) { animation-delay: .1s; } .tpk-hero__content > *:nth-child(3) { animation-delay: .2s; } .tpk-hero__img { animation: tpk-zoom 1.6s cubic-bezier(.2,.7,.2,1) both; } @keyframes tpk-rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } } @keyframes tpk-zoom { from { transform: scale(1.06); } to { transform: none; } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } .tpk-js .tpk-reveal, .tpk-js .tpk-reveal ul.products > li, .tpk-js .tpk-cats__grid > * { opacity: 1 !important; transform: none !important; } } /* Sticky header */ .tpk-header { position: sticky; top: 0; transition: box-shadow .25s; } .tpk-header.is-stuck { box-shadow: 0 6px 24px rgba(35, 57, 110, .10); } .tpk-header__logo img { transition: transform .25s; transform-origin: center; } .tpk-header.is-stuck .tpk-header__logo img { transform: scale(.82); } .admin-bar .tpk-header { top: 32px; } @media (max-width: 782px) { .admin-bar .tpk-header { top: 0; } } /* Product cards: lift + button reveal */ .woocommerce ul.products li.product { transition: transform .25s ease; } .woocommerce ul.products li.product a img { transition: transform .4s ease, box-shadow .25s ease; } @media (hover: hover) { .woocommerce ul.products li.product:hover a img { transform: translateY(-4px); box-shadow: 0 14px 30px rgba(35, 57, 110, .14); } } .tpk-btn, .woocommerce a.button, .woocommerce button.button { position: relative; } .woocommerce a.button.loading, .woocommerce button.button.loading { opacity: .7; padding-right: 2.6em; } .woocommerce a.button.loading::after, .woocommerce button.button.loading::after { content: ""; position: absolute; right: 1em; top: 50%; width: 1em; height: 1em; margin-top: -.5em; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: tpk-spin .7s linear infinite; } .woocommerce a.added_to_cart { display: none; } /* the drawer replaces the "View cart" link */ @keyframes tpk-spin { to { transform: rotate(360deg); } } .tpk-cart__count { transition: transform .2s; } /* ---------- Footer ---------- */ .tpk-footer { background: var(--tpk-navy); color: rgba(255,255,255,.82); margin-top: 4rem; } .tpk-footer a { color: #fff; text-decoration: none; } .tpk-footer a:hover, .tpk-footer a:focus { color: var(--tpk-pink); } .tpk-footer__inner { max-width: var(--tpk-max); margin: 0 auto; padding: 3.5rem 1rem 2.5rem; display: grid; grid-template-columns: 1.6fr repeat(3, 1fr); gap: 2.5rem; } .tpk-footer__brand img { width: 180px; height: auto; background: #fff; border-radius: 12px; padding: .6rem .8rem; box-sizing: content-box; } .tpk-footer__brand p { max-width: 36ch; margin: 1rem 0 .5rem; } .tpk-footer__email a { font-weight: 500; } .tpk-footer__heading { color: #fff; font-size: .85rem; text-transform: uppercase; letter-spacing: .1em; margin: .4rem 0 1rem; } .tpk-footer__list { list-style: none; margin: 0; padding: 0; } .tpk-footer__list li { margin: 0 0 .6rem; } .tpk-footer__list a { color: rgba(255,255,255,.82); } .tpk-social { list-style: none; margin: 1.25rem 0 0; padding: 0; display: flex; gap: .6rem; } .tpk-social a { display: inline-flex; width: 40px; height: 40px; align-items: center; justify-content: center; border-radius: 50%; background: rgba(255,255,255,.1); transition: background .2s, transform .2s; } .tpk-social a:hover, .tpk-social a:focus { background: var(--tpk-pink-dark); color: #fff; transform: translateY(-2px); } .tpk-footer__legal { border-top: 1px solid rgba(255,255,255,.14); } .tpk-footer__fda { max-width: var(--tpk-max); margin: 0 auto; padding: 1.25rem 1rem 0; font-size: .78rem; color: rgba(255,255,255,.6); } .tpk-footer__bar { max-width: var(--tpk-max); margin: 0 auto; padding: .75rem 1rem 1.5rem; display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; font-size: .82rem; color: rgba(255,255,255,.7); } .tpk-footer__bar p { margin: 0; } .tpk-footer__bar a { text-decoration: underline; text-underline-offset: 2px; } @media (max-width: 900px) { .tpk-footer__inner { grid-template-columns: 1fr 1fr; } .tpk-footer__brand { grid-column: 1 / -1; } } @media (max-width: 520px) { .tpk-footer__inner { grid-template-columns: 1fr; gap: 1.75rem; } .tpk-footer__bar { flex-direction: column; } } /* ---------- Notices ---------- */ .woocommerce-message, .woocommerce-info, .woocommerce-error, .woocommerce-notices-wrapper .woocommerce-message { border: 1px solid var(--tpk-line) !important; background: #fff; border-radius: var(--tpk-radius); box-shadow: 0 8px 24px rgba(35, 57, 110, .08); padding: 1rem 1.25rem 1rem 3.2rem; color: var(--tpk-ink); font-size: .95rem; margin: 0 0 1.5rem; display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; } .woocommerce-message::before, .woocommerce-info::before, .woocommerce-error::before { top: 50% !important; transform: translateY(-50%); left: 1.2rem !important; } .woocommerce-message::before { color: #1f8a5b; } .woocommerce-info::before { color: var(--tpk-navy); } .woocommerce-error { border-color: #f3c2c6 !important; display: block; } .woocommerce-error::before { color: #b3261e; top: 1.35rem !important; transform: none; } .woocommerce-error li { margin: 0; } .woocommerce-message .button, .woocommerce-info .button { order: 2; margin: 0 !important; float: none !important; padding: .6em 1.2em; font-size: .8rem; } .woocommerce-message a:not(.button), .woocommerce-info a:not(.button) { color: var(--tpk-navy); font-weight: 500; } /* ---------- Cart drawer ---------- */ .tpk-no-scroll { overflow: hidden; } .tpk-drawer { position: fixed; inset: 0; z-index: 1000; visibility: hidden; } .tpk-drawer.is-open { visibility: visible; } .tpk-drawer__scrim { position: absolute; inset: 0; background: rgba(20, 28, 50, .45); opacity: 0; transition: opacity .3s; } .tpk-drawer.is-open .tpk-drawer__scrim { opacity: 1; } .tpk-drawer__panel { position: absolute; top: 0; right: 0; height: 100%; width: min(420px, 100%); background: #fff; display: flex; flex-direction: column; transform: translateX(100%); transition: transform .35s cubic-bezier(.2,.7,.2,1); box-shadow: -20px 0 40px rgba(20, 28, 50, .15); outline: none; } .tpk-drawer.is-open .tpk-drawer__panel { transform: none; } .tpk-drawer__head { display: flex; justify-content: space-between; align-items: center; padding: 1.1rem 1.25rem; border-bottom: 1px solid var(--tpk-line); } .tpk-drawer__head h2 { margin: 0; font-size: 1.25rem; } .tpk-drawer__close { background: none; border: 0; color: var(--tpk-navy); padding: .4rem; border-radius: 8px; cursor: pointer; display: inline-flex; } .tpk-drawer__close:hover { background: var(--tpk-cream); } .tpk-drawer__added { margin: 0; padding: 0 1.25rem; color: #1f8a5b; font-weight: 500; font-size: .92rem; } .tpk-drawer__added:not(:empty) { padding: .8rem 1.25rem; background: #eef8f2; } .tpk-drawer__freeship { padding: .9rem 1.25rem 0; } .tpk-meter p { margin: 0 0 .45rem; font-size: .9rem; } .tpk-meter__bar { height: 8px; border-radius: 99px; background: var(--tpk-cream); overflow: hidden; border: 1px solid var(--tpk-line); } .tpk-meter__bar span { display: block; height: 100%; width: 100%; background: linear-gradient(90deg, var(--tpk-navy), var(--tpk-pink)); border-radius: 99px; transform-origin: left; transition: transform .5s ease; } .tpk-drawer .widget_shopping_cart_content { flex: 1; display: flex; flex-direction: column; min-height: 0; padding: .5rem 1.25rem 1.25rem; } .tpk-drawer .woocommerce-mini-cart { list-style: none; margin: 0; padding: 0; overflow-y: auto; flex: 1; } .tpk-drawer .woocommerce-mini-cart-item { position: relative; display: grid; grid-template-columns: 64px 1fr; column-gap: .9rem; align-items: center; padding: .9rem 2rem .9rem 0; border-bottom: 1px solid var(--tpk-line); font-size: .93rem; } .tpk-drawer .woocommerce-mini-cart-item a:not(.remove) { grid-row: 1 / span 2; display: contents; color: var(--tpk-navy); font-weight: 500; text-decoration: none; } .tpk-drawer .woocommerce-mini-cart-item img { grid-row: 1 / span 2; width: 64px; height: 64px; object-fit: cover; border-radius: 8px; border: 1px solid var(--tpk-line); margin: 0; float: none; } .tpk-drawer .woocommerce-mini-cart-item .quantity { grid-column: 2; color: var(--tpk-muted); font-size: .88rem; } .tpk-drawer .woocommerce-mini-cart-item .variation { grid-column: 2; margin: .15rem 0; font-size: .8rem; color: var(--tpk-muted); } .tpk-drawer .woocommerce-mini-cart-item .variation dt, .tpk-drawer .woocommerce-mini-cart-item .variation dd { display: inline; margin: 0; } .tpk-drawer .woocommerce-mini-cart-item .variation dd p { display: inline; margin: 0; } .tpk-drawer a.remove { position: absolute; right: 0; top: 50%; transform: translateY(-50%); width: 26px; height: 26px; line-height: 24px; text-align: center; border-radius: 50%; color: var(--tpk-muted) !important; font-size: 1.1rem; text-decoration: none; } .tpk-drawer a.remove:hover { background: #fde8ea; color: #b3261e !important; } .tpk-drawer .woocommerce-mini-cart__total { display: flex; justify-content: space-between; margin: 1rem 0 .8rem; padding-top: .5rem; font-size: 1.05rem; } .tpk-drawer .woocommerce-mini-cart__buttons { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; margin: 0; } .tpk-drawer .woocommerce-mini-cart__buttons .button { text-align: center; margin: 0; } .tpk-drawer .woocommerce-mini-cart__buttons .button:not(.checkout) { background: #fff; color: var(--tpk-navy); } .tpk-drawer .woocommerce-mini-cart__buttons .button:not(.checkout):hover { background: var(--tpk-cream); } .tpk-drawer .woocommerce-mini-cart__empty-message { margin: 2rem 0; text-align: center; color: var(--tpk-muted); } /* ---------- Product page ---------- */ .single-product div.product { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 0 3.5rem; align-items: start; } .single-product div.product > .woocommerce-product-gallery, .single-product div.product > .summary { width: auto !important; float: none !important; margin: 0 !important; } .single-product div.product > .tpk-badges { display: none; } /* Not sticky: a sticky child is bounded by the whole div.product, so it slid over reviews/related. */ .single-product div.product > .tpk-reviews, .single-product div.product > .related, .single-product div.product > .upsells { grid-column: 1 / -1; } .single-product .woocommerce-product-gallery { border-radius: var(--tpk-radius); } .single-product .woocommerce-product-gallery .flex-control-thumbs { display: flex; gap: .6rem; margin-top: .75rem !important; } .single-product .woocommerce-product-gallery .flex-control-thumbs li { width: 72px !important; } .single-product .woocommerce-product-gallery .flex-control-thumbs img { border-radius: 8px; border: 2px solid transparent; opacity: .7; transition: opacity .2s, border-color .2s; } .single-product .woocommerce-product-gallery .flex-control-thumbs img.flex-active, .single-product .woocommerce-product-gallery .flex-control-thumbs img:hover { opacity: 1; border-color: var(--tpk-navy); } .single-product div.product form.cart { display: flex; flex-wrap: wrap; gap: .75rem; align-items: stretch; margin: 1.25rem 0 1.5rem; } .single-product div.product form.cart .variations { width: 100%; margin: 0; } .single-product div.product form.cart .variations th, .single-product div.product form.cart .variations td { display: block; padding: 0; text-align: left; border: 0; background: none; } .single-product div.product form.cart .variations label { font-weight: 600; color: var(--tpk-navy); font-size: .9rem; } .single-product div.product form.cart .variations select { width: 100%; padding: .75rem 1rem; border: 1px solid var(--tpk-line); border-radius: var(--tpk-radius); font: inherit; margin: .35rem 0 .5rem; background: #fff; } .single-product div.product form.cart .single_variation_wrap { width: 100%; } .single-product div.product form.cart .woocommerce-variation-add-to-cart { display: flex; gap: .75rem; } .single-product div.product form.cart .single_add_to_cart_button { flex: 1; padding: 1em 1.6em; font-size: 1rem; } .reset_variations { font-size: .85rem; } .single-product .product_meta { font-size: .85rem; color: var(--tpk-muted); margin-top: 1.25rem; } .single-product .product_meta > span { display: block; margin-bottom: .2rem; } @media (max-width: 860px) { .single-product div.product { grid-template-columns: 1fr; } .single-product div.product .summary { position: static; margin-top: 1.5rem !important; } } /* Quantity stepper */ .tpk-stepper { display: inline-flex; align-items: stretch; border: 1px solid var(--tpk-line); border-radius: var(--tpk-radius); overflow: hidden; background: #fff; } .tpk-stepper .qty { width: 3rem !important; border: 0 !important; text-align: center; font: inherit; font-weight: 500; -moz-appearance: textfield; padding: 0 !important; background: transparent; } .tpk-stepper .qty::-webkit-outer-spin-button, .tpk-stepper .qty::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } .tpk-stepper__btn { width: 2.6rem; border: 0; background: none; color: var(--tpk-navy); font-size: 1.2rem; cursor: pointer; } .tpk-stepper__btn:hover { background: var(--tpk-cream); } /* Accordion (replaces tabs) */ .tpk-accordion { border-top: 1px solid var(--tpk-line); margin-top: 1.5rem; } .tpk-accordion__item { border-bottom: 1px solid var(--tpk-line); } .tpk-accordion__item summary { list-style: none; cursor: pointer; padding: 1.05rem 0; display: flex; justify-content: space-between; align-items: center; font-weight: 600; color: var(--tpk-navy); letter-spacing: .02em; } .tpk-accordion__item summary::-webkit-details-marker { display: none; } .tpk-accordion__item summary::after { content: ""; width: 10px; height: 10px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg) translateY(-3px); transition: transform .25s; } .tpk-accordion__item[open] summary::after { transform: rotate(-135deg) translateY(-3px); } .tpk-accordion__body { padding: 0 0 1.25rem; font-size: .96rem; color: var(--tpk-ink); } .tpk-accordion__body > :first-child { margin-top: 0; } .tpk-accordion__body h3 { font-size: 1rem; margin: 1rem 0 .4rem; } .tpk-accordion__body ul { padding-left: 1.2rem; } .tpk-accordion__item[open] .tpk-accordion__body { animation: tpk-rise .35s ease both; } /* Reviews */ .tpk-reviews { margin: 3.5rem 0 1rem; padding-top: 2.5rem; border-top: 1px solid var(--tpk-line); } .tpk-reviews .woocommerce-Reviews-title { font-size: 1.6rem; } .tpk-reviews #review_form_wrapper { max-width: 640px; } .tpk-reviews input[type="text"], .tpk-reviews input[type="email"], .tpk-reviews textarea { width: 100%; border: 1px solid var(--tpk-line); border-radius: var(--tpk-radius); padding: .7rem .9rem; font: inherit; } .related.products > h2, .upsells > h2 { text-align: center; font-size: 1.8rem; margin: 3rem 0 1.5rem; } /* ---------- Forms (contact, cart, checkout, account) ---------- */ .tpk-form { display: grid; gap: .25rem; } .tpk-form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; } .tpk-field label, .woocommerce form .form-row label { display: block; font-weight: 500; font-size: .9rem; color: var(--tpk-navy); margin-bottom: .35rem; } .tpk-field input, .tpk-field select, .tpk-field textarea, .woocommerce form .form-row input.input-text, .woocommerce form .form-row textarea, .woocommerce form .form-row select, .woocommerce-cart table.cart td.actions .coupon .input-text, .select2-container .select2-selection--single { width: 100%; border: 1px solid #d9d3c7; border-radius: var(--tpk-radius); padding: .75rem .95rem; font: inherit; color: var(--tpk-ink); background: #fff; transition: border-color .15s, box-shadow .15s; box-sizing: border-box; } .select2-container .select2-selection--single { height: auto; padding: .55rem .6rem; } .tpk-field input:focus, .tpk-field select:focus, .tpk-field textarea:focus, .woocommerce form .form-row input.input-text:focus, .woocommerce form .form-row textarea:focus, .woocommerce form .form-row select:focus { outline: none; border-color: var(--tpk-navy); box-shadow: 0 0 0 3px rgba(35, 57, 110, .14); } .tpk-hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; } .tpk-form-status { border-radius: var(--tpk-radius); padding: 1rem 1.25rem; margin: 0 0 1.25rem; font-weight: 500; } .tpk-form-status--ok { background: #eef8f2; color: #17603f; border: 1px solid #bfe3cf; } .tpk-form-status--error { background: #fdecee; color: #8f1d17; border: 1px solid #f3c2c6; } @media (max-width: 600px) { .tpk-form__row { grid-template-columns: 1fr; gap: 0; } } /* ---------- Cart page ---------- */ .woocommerce-cart .site-main, .woocommerce-checkout .site-main { max-width: var(--tpk-max); margin: 0 auto; padding: 0 1rem 3rem; } .woocommerce-cart .page-header .entry-title, .woocommerce-checkout .page-header .entry-title { font-size: clamp(2rem, 4vw, 2.6rem); margin: 2rem 0 1.5rem; text-align: left; } /* Everything stacks in column 1; the totals card owns column 2 from the top, so DOM order (notices, free-shipping bar, table, upsells) never pushes it around. */ .woocommerce-cart .woocommerce { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 0 2.5rem; align-items: start; } .woocommerce-cart .woocommerce > * { grid-column: 1; min-width: 0; } .woocommerce-cart .woocommerce > .cart-empty, .woocommerce-cart .woocommerce > .return-to-shop { grid-column: 1 / -1; } .woocommerce-cart .woocommerce > .cart-collaterals { grid-column: 2; grid-row: 1 / span 20; width: 100%; position: sticky; top: 140px; } .woocommerce-cart .cart-collaterals .cart_totals { width: 100% !important; float: none !important; } .woocommerce-cart .woocommerce-cart-form { grid-column: 1; } .woocommerce-cart table.shop_table { border: 0; border-collapse: collapse; } .woocommerce-cart table.shop_table thead th { font-size: .8rem; text-transform: uppercase; letter-spacing: .08em; color: var(--tpk-muted); font-weight: 500; border-bottom: 1px solid var(--tpk-line); padding: .75rem .5rem; } .woocommerce-cart table.shop_table td { border-top: 0; border-bottom: 1px solid var(--tpk-line); padding: 1.1rem .5rem; vertical-align: middle; } .woocommerce-cart table.cart img { width: 84px; border-radius: 10px; border: 1px solid var(--tpk-line); } .woocommerce-cart table.cart td.product-name a { color: var(--tpk-navy); font-weight: 500; text-decoration: none; font-size: 1.02rem; } .woocommerce-cart table.cart td.product-remove a.remove { color: var(--tpk-muted) !important; font-size: 1.3rem; width: 30px; height: 30px; line-height: 28px; } .woocommerce-cart table.cart td.product-remove a.remove:hover { background: #fde8ea; color: #b3261e !important; } .woocommerce-cart table.cart td.actions { padding: 1.25rem 0; border-bottom: 0; } .woocommerce-cart table.cart td.actions .coupon { display: flex; gap: .5rem; } .woocommerce-cart table.cart td.actions .coupon .input-text { width: 220px !important; margin: 0 !important; } .woocommerce-cart table.cart td.actions .coupon .button { background: #fff; color: var(--tpk-navy); } .woocommerce-cart table.cart td.actions > [name="update_cart"] { display: none; } /* quantities apply automatically */ .woocommerce-cart .cart_totals, .woocommerce-checkout #order_review, .woocommerce-checkout .tpk-order-card { background: var(--tpk-cream); border: 1px solid var(--tpk-line); border-radius: 16px; padding: 1.5rem; } .woocommerce-cart .cart_totals h2 { font-size: 1.3rem; margin: 0 0 1rem; } .woocommerce .cart_totals table.shop_table, .woocommerce-checkout-review-order-table { border: 0 !important; margin: 0 0 1rem !important; } .woocommerce .cart_totals table.shop_table th, .woocommerce .cart_totals table.shop_table td, .woocommerce-checkout-review-order-table th, .woocommerce-checkout-review-order-table td { border: 0 !important; border-bottom: 1px solid var(--tpk-line) !important; padding: .8rem 0 !important; background: none !important; vertical-align: top; } .woocommerce .cart_totals table.shop_table th, .woocommerce-checkout-review-order-table tfoot th { font-weight: 500; color: var(--tpk-muted); width: 38%; } .woocommerce .cart_totals .order-total th, .woocommerce .cart_totals .order-total td, .woocommerce-checkout-review-order-table .order-total th, .woocommerce-checkout-review-order-table .order-total td { border-bottom: 0 !important; font-size: 1.15rem; color: var(--tpk-navy); } .woocommerce .cart_totals .order-total .amount, .woocommerce-checkout-review-order-table .order-total .amount { font-weight: 600; } .woocommerce-cart .wc-proceed-to-checkout { padding: .5rem 0 0; } .woocommerce-cart .wc-proceed-to-checkout .checkout-button { display: block; width: 100%; text-align: center; font-size: 1.05rem; padding: 1.05em; margin: 0; } .woocommerce-shipping-calculator, .woocommerce-shipping-destination { font-size: .85rem; color: var(--tpk-muted); } .lsb-cart-upsell, .lsb-upsell { grid-column: 1; } @media (max-width: 960px) { .woocommerce-cart .woocommerce { grid-template-columns: 1fr; } .woocommerce-cart .woocommerce > .cart-collaterals { grid-column: 1; grid-row: auto; position: static; margin-top: 1.5rem; } .woocommerce-cart table.cart td.actions .coupon .input-text { width: 100% !important; } } /* Shipping method list (cart + checkout) */ ul#shipping_method { list-style: none; margin: 0; padding: 0; } ul#shipping_method li { margin: 0 0 .5rem; padding: 0; text-indent: 0; display: flex; gap: .5rem; align-items: baseline; flex-wrap: wrap; } ul#shipping_method li label { font-weight: 400; color: var(--tpk-ink); display: inline; } ul#shipping_method .tpk-pickup__raw { position: absolute; left: -9999px; } .tpk-pickup { flex-direction: column; align-items: stretch !important; } .tpk-pickup__label { cursor: pointer; } .tpk-pickup__free { display: inline-block; margin-left: .3rem; background: #e3f3ea; color: #17603f; border-radius: 99px; font-size: .72rem; font-weight: 600; padding: .1em .55em; text-transform: uppercase; letter-spacing: .05em; } .tpk-pickup__select { width: 100%; margin-top: .4rem; border: 1px solid #d9d3c7; border-radius: 8px; padding: .5rem .6rem; font: inherit; font-size: .88rem; background: #fff; } /* ---------- Checkout ---------- */ .woocommerce-checkout form.checkout { display: grid; grid-template-columns: minmax(0, 1fr) 420px; gap: 0 3rem; align-items: start; } .woocommerce-checkout form.checkout > .woocommerce-NoticeGroup, .woocommerce-checkout form.checkout > .woocommerce-notices-wrapper { grid-column: 1 / -1; } .woocommerce-checkout form.checkout { grid-template-rows: auto 1fr; } .woocommerce-checkout #customer_details { grid-column: 1; grid-row: 1 / span 2; } .woocommerce-checkout #customer_details .col-1, .woocommerce-checkout #customer_details .col-2 { width: 100% !important; float: none !important; } .woocommerce-checkout #order_review_heading { grid-column: 2; grid-row: 1; margin: 0 0 1rem; font-size: 1.3rem; } .woocommerce-checkout #order_review { grid-column: 2; grid-row: 2; position: sticky; top: 140px; } .woocommerce-checkout h3 { font-size: 1.25rem; margin: 1.5rem 0 1rem; } .woocommerce-checkout .woocommerce-billing-fields > h3 { margin-top: 0; } .woocommerce-checkout .form-row { margin: 0 0 1rem !important; padding: 0 !important; } .woocommerce-checkout .form-row-first, .woocommerce-checkout .form-row-last { width: calc(50% - .5rem) !important; } .woocommerce-checkout .woocommerce-form-coupon-toggle .woocommerce-info { margin-bottom: 1rem; } .woocommerce-checkout #ship-to-different-address { font-size: 1rem; } .woocommerce-checkout-review-order-table thead { display: none; } .woocommerce-checkout-review-order-table .cart_item td { font-size: .93rem; } .woocommerce-checkout-review-order-table .product-quantity { color: var(--tpk-muted); font-weight: 500; } .woocommerce-checkout #payment { background: #fff !important; border: 1px solid var(--tpk-line); border-radius: 12px; } .woocommerce-checkout #payment ul.payment_methods { border-bottom: 1px solid var(--tpk-line) !important; padding: 1rem 1.25rem !important; } .woocommerce-checkout #payment div.payment_box { background: var(--tpk-cream) !important; border-radius: 8px; color: var(--tpk-ink) !important; } .woocommerce-checkout #payment div.payment_box::before { border-bottom-color: var(--tpk-cream) !important; } .woocommerce-checkout #payment div.form-row { padding: 1rem 1.25rem !important; } .woocommerce-checkout #place_order { width: 100%; float: none !important; font-size: 1.05rem; padding: 1.05em; } .woocommerce-checkout .woocommerce-terms-and-conditions-wrapper { font-size: .85rem; color: var(--tpk-muted); } @media (max-width: 960px) { .woocommerce-checkout form.checkout { grid-template-columns: 1fr; } .woocommerce-checkout #order_review_heading, .woocommerce-checkout #order_review { grid-column: 1; grid-row: auto; position: static; } .woocommerce-checkout #order_review_heading { margin-top: 1.5rem; } } @media (max-width: 520px) { .woocommerce-checkout .form-row-first, .woocommerce-checkout .form-row-last { width: 100% !important; } } /* Store Booster free-shipping bar */ .lsb-freeship { background: #fff !important; border: 1px solid var(--tpk-line) !important; border-radius: 12px !important; padding: .9rem 1.1rem !important; margin: 0 0 1.5rem !important; color: var(--tpk-ink) !important; } .tpk-page-hero { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--tpk-radius); margin: .5rem 0 1.5rem; } /* Cart table: drop Hello's table borders + zebra rows */ .woocommerce-cart table.shop_table, .woocommerce-cart table.shop_table th, .woocommerce-cart table.shop_table td, .woocommerce-checkout table.shop_table, .woocommerce-checkout table.shop_table th, .woocommerce-checkout table.shop_table td { border-left: 0 !important; border-right: 0 !important; border-top: 0 !important; } .woocommerce-cart table.shop_table { border: 0 !important; border-radius: 0; } .woocommerce table.shop_table tbody > tr:nth-child(odd) > td, .woocommerce table.shop_table tbody > tr:nth-child(odd) > th, .woocommerce table.shop_table tbody tr:hover > td, .woocommerce table.shop_table tbody tr:hover > th { background: none !important; } .woocommerce-cart table.cart th.product-thumbnail, .woocommerce-cart table.cart td.product-thumbnail { width: 100px; } .woocommerce-cart table.cart th.product-remove, .woocommerce-cart table.cart td.product-remove { width: 36px; padding-right: 0; } .woocommerce-cart table.cart td.product-subtotal { font-weight: 600; color: var(--tpk-navy); } .woocommerce-cart table.cart td.product-name .variation { font-size: .85rem; color: var(--tpk-muted); margin: .25rem 0 0; } @media (max-width: 768px) { .woocommerce-cart table.shop_table_responsive tr { display: block; position: relative; padding: 1rem 0 1rem 96px; border-bottom: 1px solid var(--tpk-line); } .woocommerce-cart table.shop_table_responsive tr td { border: 0 !important; padding: .2rem 0 !important; text-align: left !important; } .woocommerce-cart table.shop_table_responsive tr td::before { font-weight: 500; color: var(--tpk-muted); } .woocommerce-cart table.cart td.product-thumbnail { display: block !important; position: absolute; left: 0; top: 1rem; width: 84px; } .woocommerce-cart table.cart td.product-thumbnail::before, .woocommerce-cart table.cart td.product-remove::before { display: none; } .woocommerce-cart table.cart td.product-remove { position: absolute; right: 0; top: .8rem; } .woocommerce-cart table.cart tr.cart_item td.product-name { padding-right: 2rem !important; } .woocommerce-cart table.cart td.actions { padding: 1rem 0 !important; } } /* Store Booster cart upsell */ .lsb-upsell { margin: 2rem 0 0; } .lsb-upsell__head { font-size: 1.15rem; color: var(--tpk-navy); font-weight: 600; margin: 0 0 1rem; } .lsb-upsell__grid { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; } .lsb-upsell__card { background: #fff !important; border: 1px solid var(--tpk-line) !important; border-radius: 12px !important; padding: .9rem !important; text-align: center; display: flex; flex-direction: column; gap: .4rem; box-shadow: none !important; } .lsb-upsell__thumb img { aspect-ratio: 1; object-fit: cover; border-radius: 8px; width: 100%; } .lsb-upsell__name, .lsb-upsell__name a { color: var(--tpk-navy) !important; font-weight: 500; text-decoration: none !important; font-size: .92rem; line-height: 1.3; } .lsb-upsell__price { color: var(--tpk-ink); font-size: .9rem; } .lsb-upsell__card .button { margin-top: auto !important; font-size: .75rem !important; padding: .65em .8em !important; width: 100%; } @media (max-width: 520px) { .lsb-upsell__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } /* Store Booster free-shipping bar internals */ .lsb-freeship__msg { font-size: .95rem; text-align: left !important; } .lsb-freeship__track { height: 8px !important; border-radius: 99px !important; background: var(--tpk-cream) !important; border: 1px solid var(--tpk-line); } .lsb-freeship__fill { background: linear-gradient(90deg, var(--tpk-navy), var(--tpk-pink)) !important; border-radius: 99px !important; } .lsb-freeship__amt { color: var(--tpk-navy) !important; } /* Fixes: drawer thumbs (WooCommerce widget CSS forces 32px), mobile cart details */ .tpk-drawer .woocommerce-mini-cart-item img { width: 64px !important; height: 64px !important; float: none !important; margin: 0 !important; } .tpk-drawer .woocommerce-mini-cart-item { padding-left: 0 !important; } .woocommerce-cart table.cart td.actions { background: none !important; } .woocommerce-cart table.cart td.actions button[name="update_cart"] { display: none !important; } @media (max-width: 768px) { .woocommerce-cart table.cart td.product-name::before { display: none !important; } .woocommerce-cart table.cart td.actions .coupon { display: flex !important; width: 100%; } .woocommerce-cart table.cart td.actions .coupon .input-text { flex: 1; width: auto !important; } .woocommerce-cart table.cart td.actions .coupon .button { width: auto !important; flex: none; } } @media (max-width: 768px) { .woocommerce-cart table.shop_table_responsive tr:has(td.actions) { padding-left: 0; border-bottom: 0; } .woocommerce-cart table.cart td.actions .coupon { gap: .5rem; } .woocommerce-cart table.cart td.actions .coupon .input-text { min-width: 0; } } /* ===================================================================== v3 — cart totals, shipping option cards, meters, upsell, contact page ===================================================================== */ /* Free-shipping meter in cart/checkout */ .tpk-cart-meter, .tpk-checkout-meter { background: #fff; border: 1px solid var(--tpk-line); border-radius: 14px; padding: 1rem 1.25rem; margin: 0 0 1.5rem; } .tpk-checkout-meter { margin: 0 0 1rem; } .tpk-meter p { margin: 0 0 .5rem; } .tpk-meter__note { font-size: .82rem; color: var(--tpk-muted); margin: .5rem 0 0 !important; } .tpk-meter.is-reached p strong { color: #17603f; } .tpk-meter.is-reached .tpk-meter__bar span { background: #1f8a5b; } /* Cart items: calmer header, roomier rows */ .woocommerce-cart table.shop_table thead th { background: none; padding-top: 0; } .woocommerce-cart table.cart th.product-name { padding-left: 0; } .woocommerce-cart table.cart td.product-price { color: var(--tpk-muted); } /* Totals card */ .woocommerce-cart .cart_totals { padding: 1.75rem; } .woocommerce-cart .cart_totals h2 { font-size: 1.35rem !important; margin: 0 0 .75rem !important; } .woocommerce .cart_totals table.shop_table tr.woocommerce-shipping-totals th, .woocommerce .cart_totals table.shop_table tr.woocommerce-shipping-totals td, .woocommerce-checkout-review-order-table tr.woocommerce-shipping-totals th, .woocommerce-checkout-review-order-table tr.woocommerce-shipping-totals td { display: block; width: 100% !important; text-align: left; } .woocommerce .cart_totals table.shop_table tr.woocommerce-shipping-totals th, .woocommerce-checkout-review-order-table tr.woocommerce-shipping-totals th { border-bottom: 0 !important; padding-bottom: .4rem !important; } .woocommerce .cart_totals table.shop_table td, .woocommerce-checkout-review-order-table td { text-align: right; } .woocommerce .cart_totals table.shop_table tr.woocommerce-shipping-totals td, .woocommerce-checkout-review-order-table tr.woocommerce-shipping-totals td { text-align: left; padding-top: 0 !important; } .woocommerce-shipping-destination { margin: .75rem 0 .25rem !important; } .woocommerce-shipping-calculator .shipping-calculator-button { font-size: .85rem; color: var(--tpk-navy); } .woocommerce-shipping-calculator .shipping-calculator-button::after { display: none !important; } /* Shipping options as selectable cards */ ul#shipping_method { display: grid; gap: .5rem; } ul#shipping_method > li:not(.tpk-pickup__raw) { position: relative; display: flex !important; flex-wrap: wrap; align-items: center; gap: .6rem; margin: 0 !important; padding: .8rem .9rem !important; background: #fff; border: 1.5px solid var(--tpk-line); border-radius: 10px; cursor: pointer; transition: border-color .15s, box-shadow .15s; } ul#shipping_method > li:has(input:checked) { border-color: var(--tpk-navy); box-shadow: 0 0 0 3px rgba(35, 57, 110, .10); } ul#shipping_method > li input[type="radio"] { margin: 0 !important; accent-color: var(--tpk-navy); width: 18px; height: 18px; flex: none; } ul#shipping_method > li label { flex: 1; display: flex !important; justify-content: space-between; gap: .5rem; margin: 0 !important; cursor: pointer; font-size: .93rem; line-height: 1.35; } ul#shipping_method > li label .amount { font-weight: 600; color: var(--tpk-navy); white-space: nowrap; } .tpk-pickup { flex-direction: row !important; } .tpk-pickup__label { display: flex !important; align-items: center; gap: .6rem; flex: 1; justify-content: flex-start !important; } .tpk-pickup__free { margin-left: auto !important; } .tpk-pickup__select { flex-basis: 100%; margin: .2rem 0 0 calc(18px + .6rem) !important; width: calc(100% - 18px - .6rem) !important; } /* Our upsell block */ .tpk-upsell { margin: 2.5rem 0 0; } .tpk-upsell h2 { font-size: 1.2rem; margin: 0 0 1rem; } .tpk-upsell__grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; } .tpk-upsell__card { background: #fff; border: 1px solid var(--tpk-line); border-radius: 12px; padding: .8rem; display: flex; flex-direction: column; gap: .35rem; text-align: center; transition: box-shadow .2s, transform .2s; } .tpk-upsell__card:hover { box-shadow: 0 10px 24px rgba(35, 57, 110, .10); transform: translateY(-2px); } .tpk-upsell__img img { aspect-ratio: 1; object-fit: cover; border-radius: 8px; width: 100%; margin: 0 !important; } .tpk-upsell__name { color: var(--tpk-navy); font-weight: 500; font-size: .88rem; line-height: 1.3; text-decoration: none; } .tpk-upsell__price { font-size: .88rem; color: var(--tpk-ink); } .tpk-upsell__card .button { margin-top: auto; font-size: .72rem; padding: .6em .8em; } @media (max-width: 960px) { .tpk-upsell__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } /* Contact page */ .page:has(.tpk-contact-hero) .page-header { display: none; } .page .site-main .page-content:has(.tpk-contact-hero) { max-width: var(--tpk-max) !important; } .tpk-contact-hero { text-align: center; padding: 3.5rem 1.5rem 3rem; margin: 1.5rem 0 0; border-radius: 20px; background: radial-gradient(120% 140% at 50% 0%, #fff 0%, var(--tpk-cream) 60%, #f4ece0 100%); border: 1px solid var(--tpk-line); } .tpk-eyebrow { text-transform: uppercase; letter-spacing: .14em; font-size: .8rem; font-weight: 600; color: var(--tpk-pink-dark); margin: 0 0 .6rem; } .tpk-contact-hero h1 { font-size: clamp(2rem, 4.5vw, 3rem); margin: 0 0 1rem; } .tpk-contact-hero p:last-child { max-width: 56ch; margin: 0 auto; font-size: 1.1rem; color: var(--tpk-muted); } .tpk-contact-ways { list-style: none; padding: 0; margin: -1.75rem 1.5rem 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; position: relative; } .tpk-contact-ways li { background: #fff; border: 1px solid var(--tpk-line); border-radius: 16px; padding: 1.4rem 1.25rem; text-align: center; box-shadow: 0 12px 30px rgba(35, 57, 110, .08); transition: transform .2s, box-shadow .2s; } .tpk-contact-ways li:hover { transform: translateY(-3px); box-shadow: 0 16px 36px rgba(35, 57, 110, .12); } .tpk-contact-ways__icon { display: inline-flex; width: 48px; height: 48px; align-items: center; justify-content: center; border-radius: 50%; background: var(--tpk-navy); color: #fff; margin-bottom: .6rem; } .tpk-contact-ways h2 { font-size: 1.05rem !important; margin: 0 0 .3rem !important; } .tpk-contact-ways p { margin: 0; font-size: .95rem; color: var(--tpk-muted); } .tpk-contact-main { display: grid; grid-template-columns: 1.25fr 1fr; gap: 2.5rem; align-items: stretch; margin: 3.5rem 0 1rem; } .tpk-contact-main__form { background: #fff; border: 1px solid var(--tpk-line); border-radius: 20px; padding: 2.25rem; box-shadow: 0 12px 30px rgba(35, 57, 110, .06); } .tpk-contact-main__form h2 { margin: 0 0 1.25rem !important; font-size: 1.5rem !important; } .tpk-contact-main__form .tpk-btn { width: 100%; padding: 1em; font-size: 1rem; } .tpk-contact-main__photo { margin: 0; display: flex; flex-direction: column; gap: 1rem; } .tpk-contact-main__photo img { width: 100%; flex: 1; min-height: 320px; object-fit: cover; border-radius: 20px; } .tpk-contact-main__photo figcaption { background: var(--tpk-cream); border: 1px solid var(--tpk-line); border-radius: 14px; padding: 1rem 1.25rem; font-size: .95rem; } @media (max-width: 860px) { .tpk-contact-ways { grid-template-columns: 1fr; margin: 1rem 0 0; } .tpk-contact-main { grid-template-columns: 1fr; gap: 1.5rem; margin-top: 2rem; } .tpk-contact-main__form { padding: 1.5rem; } } /* Totals as a list, not a table: table cells can't go full width, which squeezed the shipping options into a narrow column. */ .woocommerce .cart_totals table.shop_table, .woocommerce .cart_totals table.shop_table tbody { display: block; width: 100%; } .woocommerce .cart_totals table.shop_table tr { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; border-bottom: 1px solid var(--tpk-line); padding: .8rem 0; } .woocommerce .cart_totals table.shop_table tr th, .woocommerce .cart_totals table.shop_table tr td { display: block; width: auto !important; border: 0 !important; padding: 0 !important; } .woocommerce .cart_totals table.shop_table tr.woocommerce-shipping-totals { flex-direction: column; align-items: stretch; gap: .6rem; } .woocommerce .cart_totals table.shop_table tr.woocommerce-shipping-totals td { width: 100% !important; } .woocommerce .cart_totals table.shop_table tr.order-total { border-bottom: 0; padding-top: 1rem; } .woocommerce-checkout-review-order-table tfoot tr.woocommerce-shipping-totals td ul#shipping_method { margin-top: .25rem; } .tpk-upsell__name, .tpk-upsell__name:hover { text-decoration: none !important; } .tpk-upsell__name:hover { color: var(--tpk-pink-dark); } /* Checkout summary: same list layout as the cart totals */ .woocommerce-checkout-review-order-table, .woocommerce-checkout-review-order-table tbody, .woocommerce-checkout-review-order-table tfoot { display: block; width: 100%; } .woocommerce-checkout-review-order-table tr { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; border-bottom: 1px solid var(--tpk-line); padding: .75rem 0; } .woocommerce-checkout-review-order-table tr th, .woocommerce-checkout-review-order-table tr td { display: block; width: auto !important; border: 0 !important; padding: 0 !important; } .woocommerce-checkout-review-order-table tr.cart_item td.product-name { text-align: left; flex: 1; } .woocommerce-checkout-review-order-table tr.cart_item td.product-total { white-space: nowrap; text-align: right; } .woocommerce-checkout-review-order-table tr.woocommerce-shipping-totals { flex-direction: column; align-items: stretch; gap: .6rem; } .woocommerce-checkout-review-order-table tr.woocommerce-shipping-totals td { width: 100% !important; } .woocommerce-checkout-review-order-table tr.order-total { border-bottom: 0; padding-top: 1rem; } /* Mobile cart fixes: no horizontal overflow, no zebra rows, no duplicate totals labels */ .woocommerce table.shop_table tbody > tr:nth-child(even) > td, .woocommerce table.shop_table tbody > tr:nth-child(even) > th { background: none !important; } .woocommerce .cart_totals table.shop_table td::before, .woocommerce-checkout-review-order-table td::before { display: none !important; content: none !important; } @media (max-width: 768px) { .woocommerce-cart .woocommerce, .woocommerce-cart .woocommerce-cart-form, .woocommerce-cart table.cart { max-width: 100%; min-width: 0; } .woocommerce-cart table.cart, .woocommerce-cart table.cart tbody { display: block; width: 100%; } .woocommerce-cart table.cart thead { display: none; } .woocommerce-cart table.cart td.actions .coupon .button { padding-left: 1em; padding-right: 1em; } .woocommerce-cart .site-main { overflow-x: clip; } } /* Empty cart */ .woocommerce-cart .woocommerce > .wc-empty-cart-message, .woocommerce-cart .woocommerce > .return-to-shop { grid-column: 1 / -1; text-align: center; } .woocommerce-cart .cart-empty.woocommerce-info { justify-content: center; max-width: 520px; margin: 2rem auto 1.25rem; font-size: 1.05rem; padding: 1.5rem 1.5rem 1.5rem 3.2rem; } .woocommerce-cart .return-to-shop .button { padding: 1em 2.2em; } /* Farmers Markets page */ .page:has(.tpk-mk-hero) .page-header { display: none; } .page .site-main .page-content:has(.tpk-mk-hero) { max-width: var(--tpk-max) !important; } .tpk-mk-hero { display: grid; grid-template-columns: 1fr 1.1fr; gap: 2.5rem; align-items: center; margin: 1.5rem 0 0; padding: 2.5rem; border-radius: 20px; border: 1px solid var(--tpk-line); background: radial-gradient(120% 140% at 0% 0%, #fff 0%, var(--tpk-cream) 60%, #f4ece0 100%); } .tpk-mk-hero h1 { font-size: clamp(2rem, 4.5vw, 3rem); margin: 0 0 1rem; } .tpk-mk-hero__text p { font-size: 1.08rem; margin: 0 0 1rem; } .tpk-mk-hero__text p:last-child { margin: 1.5rem 0 0; } .tpk-mk-hero__img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 16px; box-shadow: 0 18px 40px rgba(35, 57, 110, .15); } .tpk-mk-title { text-align: center; font-size: clamp(1.6rem, 3vw, 2.1rem) !important; margin: 3.5rem 0 1.75rem !important; } .tpk-mk-days { display: grid; gap: 1.5rem; } .tpk-mk-day { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 1.25rem; align-items: start; padding-bottom: 1.5rem; border-bottom: 1px solid var(--tpk-line); } .tpk-mk-day:last-child { border-bottom: 0; } .tpk-mk-day .tpk-mk-list { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); } .tpk-mk-day__name { margin-top: .4rem !important; justify-self: start; } .tpk-mk-day__name { display: inline-block; margin: 0 0 .9rem !important; padding: .35em 1em; border-radius: 999px; background: var(--tpk-navy); color: #fff !important; font-size: .85rem !important; letter-spacing: .08em; text-transform: uppercase; } .tpk-mk-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .9rem; } .tpk-mk-card { background: #fff; border: 1px solid var(--tpk-line); border-radius: 14px; padding: 1.1rem 1.15rem; transition: transform .2s, box-shadow .2s; } .tpk-mk-card:hover { transform: translateY(-3px); box-shadow: 0 14px 30px rgba(35, 57, 110, .10); } .tpk-mk-card h4 { margin: 0 0 .35rem; font-size: 1.02rem; color: var(--tpk-navy); line-height: 1.3; } .tpk-mk-card__time { margin: 0 0 .5rem !important; font-weight: 600; color: var(--tpk-pink-dark); font-size: .92rem; } .tpk-mk-card__addr { margin: 0 0 .75rem !important; font-size: .9rem; color: var(--tpk-muted); line-height: 1.45; } .tpk-mk-card__map { font-size: .85rem; font-weight: 600; text-decoration: none; display: inline-flex; align-items: center; gap: .3rem; } .tpk-mk-card__map::after { content: "→"; transition: transform .2s; } .tpk-mk-card__map:hover::after { transform: translateX(3px); } .tpk-mk-gallery { display: grid; grid-template-columns: repeat(6, 1fr); gap: .75rem; margin: 3.5rem 0 1rem; } .tpk-mk-gallery figure { margin: 0; } .tpk-mk-gallery img { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 12px; transition: transform .3s; } .tpk-mk-gallery img:hover { transform: scale(1.03); } @media (max-width: 1024px) { .tpk-mk-gallery { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 760px) { .tpk-mk-hero { grid-template-columns: 1fr; padding: 1.5rem; gap: 1.5rem; } .tpk-mk-hero__img { order: -1; } .tpk-mk-day { grid-template-columns: minmax(0, 1fr); gap: .75rem; } } /* Buttons inside page content: Hello underlines .page-content links */ .page-content a.tpk-btn, .page-content a.button, .tpk-btn { text-decoration: none !important; } /* Footer: balanced at every width */ @media (max-width: 1024px) { .tpk-footer__inner { grid-template-columns: repeat(3, minmax(0, 1fr)); } .tpk-footer__brand { grid-column: 1 / -1; display: grid; grid-template-columns: auto 1fr; gap: .5rem 2rem; align-items: center; } .tpk-footer__brand > a { grid-row: span 3; } .tpk-footer__brand p, .tpk-footer__brand .tpk-social { margin: 0; } } @media (max-width: 600px) { .tpk-footer__inner { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2rem 1.25rem; padding-top: 2.5rem; } .tpk-footer__brand { display: block; text-align: center; } .tpk-footer__brand p { margin: 1rem auto .5rem; } .tpk-footer__brand .tpk-social { justify-content: center; margin-top: 1rem; } .tpk-footer__col:last-child { grid-column: 1 / -1; } .tpk-footer__col:last-child .tpk-footer__list { columns: 2; column-gap: 1.25rem; } .tpk-footer__list li { break-inside: avoid; } .tpk-footer__bar { flex-direction: column; align-items: center; text-align: center; gap: .4rem; } .tpk-footer__fda { text-align: center; } } /* No horizontal scroll on mobile cart/checkout: a