/*
Theme Name: PATO Golf
Theme URI: https://patogolf.com
Author: PATO Golf
Description: Storefront theme for PATO Golf. Pine green, a duck in a cap, and a golf cart for a cart.
Version: 1.0.2
Requires at least: 6.6
Tested up to: 6.8
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: pato
*/

:root { --pato-ease: cubic-bezier(.22, 1, .36, 1); }
body { -webkit-font-smoothing: antialiased; }
:where(h1, h2, h3) { text-wrap: balance; }
:focus-visible { outline: 2px solid var(--wp--preset--color--fairway); outline-offset: 3px; }
.wp-site-blocks > * + * { margin-block-start: 0; }
html { background: var(--wp--preset--color--chalk); }
.wp-site-blocks { min-height: 100vh; display: flex; flex-direction: column; }
.wp-site-blocks > main, .wp-site-blocks > .wp-block-group:has(> main), .wp-site-blocks > main.wp-block-group { flex: 1 0 auto; }

/* ---------- header ---------- */
.pato-header-wrap { position: sticky; top: var(--wp-admin--admin-bar--height, 0px); z-index: 50; }
.pato-header { border-bottom: 1px solid var(--wp--preset--color--line); }
.pato-brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: var(--wp--preset--color--pine); }
.pato-brand img { width: 38px; height: auto; transform-origin: 50% 90%; }
.pato-brand b { font-family: var(--wp--preset--font-family--display); font-weight: 400; font-size: 26px; letter-spacing: .03em; line-height: 1; }
.pato-brand span { font-size: 14px; font-style: italic; color: var(--wp--preset--color--fairway); padding-top: 6px; }
.pato-brand:hover img { animation: pato-waddle .6s ease-in-out 2; }
.pato-nav { gap: clamp(14px, 3vw, 30px); }
.pato-nav p { margin: 0; font-size: 15px; }
.pato-nav p a { text-decoration: none; color: var(--wp--preset--color--ink); }
.pato-nav p a:hover { text-decoration: underline; text-underline-offset: 4px; }
@media (max-width: 560px) { .pato-hide-sm { display: none; } }

/* golf cart instead of the default cart icon */
.pato-cart .wc-block-mini-cart__button { display: inline-flex; align-items: center; gap: 8px; padding: 6px 4px; color: var(--wp--preset--color--pine); font-weight: 500; font-size: 15px; }
.pato-cart .wc-block-mini-cart__button::before { content: "Cart"; order: 2; }
.pato-cart .wc-block-mini-cart__quantity-badge { order: 1; position: relative; display: inline-flex; align-items: center; }
.pato-cart .wc-block-mini-cart__icon { width: 40px !important; height: 28px !important; background: url("assets/images/golf-cart.svg") center / contain no-repeat; }
.pato-cart .wc-block-mini-cart__icon > * { display: none; }
.pato-cart .wc-block-mini-cart__badge { background: var(--wp--preset--color--pine) !important; color: var(--wp--preset--color--chalk) !important; border: 2px solid var(--wp--preset--color--chalk); font-size: 11px; min-width: 20px; height: 20px; top: -8px; right: -10px; left: auto; transform: none; }
.pato-cart .wc-block-mini-cart__amount { display: none; }
.pato-cart .wc-block-mini-cart__badge[hidden] { display: none !important; }
.pato-cart.drive .wc-block-mini-cart__icon { animation: pato-drive .7s ease; }
.pato-cart.drive .wc-block-mini-cart__badge { animation: pato-pop .45s var(--pato-ease); }

/* ---------- home ---------- */
.pato-hero-title { line-height: .95; letter-spacing: -.015em; }
.pato-hero-title .ln { display: block; animation: pato-rise .9s var(--pato-ease) both; }
.pato-hero-title .ln:nth-child(2) { animation-delay: .12s; }
.pato-hero-text { max-width: 36ch; animation: pato-rise .9s var(--pato-ease) .28s both; }
.pato-hero-cta { animation: pato-rise .9s var(--pato-ease) .4s both; }
.pato-hero-img { background: #fff; border-radius: 6px; overflow: hidden; animation: pato-slide 1.1s var(--pato-ease) .15s both; }
.pato-hero-img img { width: 100%; height: auto; max-height: 620px; object-fit: contain; transition: transform .8s var(--pato-ease); }
.pato-hero-img:hover img { transform: scale(1.03) rotate(-.6deg); }
.wp-element-button .arr { display: inline-block; transition: transform .3s var(--pato-ease); }
.wp-element-button:hover .arr { transform: translateX(5px); }
.wp-element-button:active { transform: scale(.97); }

.pato-shop { border-top: 1px solid var(--wp--preset--color--line); }
.pato-shop-head { margin-bottom: 1.5rem; }
.pato-shop-head h2, .pato-shop-head p { margin: 0; }

/* product cards (home + shop) */
.pato-grid .wc-block-product-template, .wc-block-product-template { gap: clamp(16px, 3vw, 32px) !important; }
.wc-block-product { text-align: left !important; }
.wc-block-product .wc-block-components-product-image,
.wc-block-product .wp-block-woocommerce-product-image { background: var(--wp--preset--color--stone); border-radius: 6px; overflow: hidden; transition: transform .5s var(--pato-ease), box-shadow .5s var(--pato-ease); margin-bottom: 14px; }
.wc-block-product .wc-block-components-product-image img { mix-blend-mode: multiply; transition: transform .5s var(--pato-ease); }
.wc-block-product:hover .wc-block-components-product-image { transform: translateY(-6px); box-shadow: 0 18px 30px -18px rgba(6, 48, 31, .45); }
.wc-block-product:hover .wc-block-components-product-image img { transform: scale(1.04); }
.wc-block-product .wp-block-post-title { font-size: 24px; margin: 0 !important; text-align: left; }
.wc-block-product .wp-block-post-title a { text-decoration: none; color: var(--wp--preset--color--pine); transition: color .3s; }
.wc-block-product:hover .wp-block-post-title a { color: var(--wp--preset--color--fairway); }
@supports (animation-timeline: view()) {
	.reveal, .wc-block-product { animation: pato-fade-up linear both; animation-timeline: view(); animation-range: entry 0% entry 55%; }
}

.pato-band {
	background-color: var(--wp--preset--color--chalk);
	background-image: url("/wp-content/uploads/2026/09/pato-duck-pattern.png");
	background-size: 160px 160px;
	background-position: 0 0;
	padding-block: clamp(56px, 10vw, 120px);
	border-block: 1px solid var(--wp--preset--color--line);
	animation: pato-drift 12s linear infinite;
}
.pato-plate { background: #fff; padding: clamp(24px, 5vw, 40px); border-radius: 4px; box-shadow: 0 0 0 8px var(--wp--preset--color--chalk); animation: pato-sway 6s ease-in-out infinite; }
.pato-plate img { width: 100%; height: auto; }

/* ---------- product page ---------- */
.single-product main, .woocommerce-page main { animation: pato-fade-up .6s var(--pato-ease) both; }
.single-product .wp-block-woocommerce-product-image-gallery,
.single-product .woocommerce-product-gallery__image,
.single-product .wc-block-product-gallery-large-image { background: var(--wp--preset--color--stone); border-radius: 6px; overflow: hidden; }
.single-product .woocommerce-product-gallery img { mix-blend-mode: multiply; }
.single-product .flex-control-thumbs li img { border-radius: 4px; background: var(--wp--preset--color--stone); transition: transform .2s var(--pato-ease); }
.single-product .flex-control-thumbs li img:hover { transform: translateY(-3px); }
.single-product .wp-block-post-title { font-size: clamp(2.5rem, 5.5vw, 4rem); line-height: 1; }
.single-product .variations select,
.woocommerce .quantity .qty { border: 1px solid var(--wp--preset--color--line); background: #fff; border-radius: 999px; padding: .6rem 1rem; font: inherit; }
.single-product .single_add_to_cart_button,
.woocommerce button.button, .woocommerce a.button, .wc-block-components-button:not(.is-link) {
	background: var(--wp--preset--color--pine) !important; color: var(--wp--preset--color--chalk) !important;
	border-radius: 999px !important; border: 0; font-weight: 600; padding: .85rem 1.75rem; transition: background .2s;
}
.single-product .single_add_to_cart_button:hover,
.woocommerce button.button:hover, .wc-block-components-button:not(.is-link):hover { background: var(--wp--preset--color--fairway) !important; }

/* No prices on the storefront. The cart and checkout still show totals so people can pay. */
body:not(.woocommerce-cart):not(.woocommerce-checkout) :is(.wc-block-components-product-price, .wp-block-woocommerce-product-price, .price, .woocommerce-variation-price):not(.wc-block-mini-cart__drawer *) { display: none !important; }

/* cart drawer */
.wc-block-mini-cart__drawer .wc-block-mini-cart__title { font-family: var(--wp--preset--font-family--display); font-weight: 400; color: var(--wp--preset--color--pine); }
.wc-block-mini-cart__drawer .wc-block-cart-items__row { animation: pato-fade-up .45s var(--pato-ease) both; }
.wc-block-mini-cart__drawer .wc-block-components-product-name { font-family: var(--wp--preset--font-family--display); color: var(--wp--preset--color--pine); text-decoration: none; }
.wc-block-mini-cart__drawer .wc-block-cart-item__image img { background: var(--wp--preset--color--stone); border-radius: 4px; }
.wc-block-components-notice-banner.is-success { border-color: var(--wp--preset--color--fairway); }

/* ---------- footer ---------- */
.pato-footer .pato-brand, .pato-footer a { color: var(--wp--preset--color--chalk); }
.pato-footer .pato-brand span { color: var(--wp--preset--color--bill); }
.pato-footer p { margin: 10px 0 0; opacity: .8; }
.pato-footer-nav { gap: 24px; }
.pato-footer-nav p { margin: 0; opacity: 1; }
.pato-footer-nav a { text-decoration: none; }
.pato-footer-nav a:hover { text-decoration: underline; text-underline-offset: 4px; }
.pato-copy { font-size: 13px; opacity: .6 !important; padding-top: 24px; margin-top: 24px !important; border-top: 1px solid rgba(244, 243, 238, .18); }

/* ---------- motion ---------- */
@keyframes pato-rise { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: none; } }
@keyframes pato-slide { from { opacity: 0; transform: translateX(40px) rotate(2deg); } to { opacity: 1; transform: none; } }
@keyframes pato-fade-up { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes pato-waddle { 0%, 100% { transform: rotate(0); } 25% { transform: rotate(-8deg) translateY(-2px); } 75% { transform: rotate(8deg) translateY(-2px); } }
@keyframes pato-drift { from { background-position: 0 0; } to { background-position: 160px 0; } }
@keyframes pato-sway { 0%, 100% { transform: rotate(-1.2deg); } 50% { transform: rotate(1.2deg); } }
@keyframes pato-drive { 0% { transform: translateX(0); } 35% { transform: translateX(6px) rotate(-3deg); } 70% { transform: translateX(-2px); } 100% { transform: none; } }
@keyframes pato-pop { 0% { transform: scale(1); } 40% { transform: scale(1.45); } 100% { transform: scale(1); } }

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { animation: none !important; transition: none !important; }
}