/*
Theme Name: Pet Paper Studio
Theme URI: https://example.com/pet-paper-studio
Description: Custom pet portraits & collages shop. Home page with hero, process, packages and FAQ; WooCommerce packages with pet photo uploads.
Version: 1.3.0
Requires at least: 6.4
Requires PHP: 7.4
Author: Pet Paper Studio
License: GPL-2.0-or-later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: pet-paper-studio
Tags: e-commerce, custom-logo, custom-menu
*/

:root{--chalk:#f7f5f0;--ink:#262626;--coral:#f37959;--lilac:#d8caed;--line:#d4d0c8;--muted:#625e58}

/* ---------- Base ---------- */
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:90px}
body{margin:0;background:var(--chalk);color:var(--ink);font-family:'Manrope',sans-serif;overflow-x:clip}
button,a{-webkit-tap-highlight-color:transparent}
a{color:inherit;text-decoration:none}
button{cursor:pointer;font:inherit}
button,a{transition:transform .2s,background .2s}
button:active,.button:active{transform:scale(.98)}
:focus-visible{outline:3px solid var(--coral);outline-offset:5px}
h1,h2,h3,p{margin:0}
h1,h2{font-family:'Barlow Condensed',sans-serif;font-weight:600;letter-spacing:-.035em}
h1{font-size:clamp(70px,9vw,145px);line-height:.93;margin:35px 0 23px;position:relative;letter-spacing:-.04em}
h2{font-size:clamp(44px,5vw,68px);line-height:1}
img{max-width:100%;height:auto}
h1 em,h2 em{font-style:normal;color:var(--coral)}
.icon{flex-shrink:0}
.screen-reader-text{border:0;clip:rect(1px,1px,1px,1px);clip-path:inset(50%);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute!important;width:1px;word-wrap:normal!important}
.skip-link:focus{clip:auto;clip-path:none;height:auto;width:auto;left:12px;top:12px;z-index:100;background:var(--ink);color:var(--chalk);padding:12px 16px}

/* ---------- Buttons (also overrides WooCommerce defaults) ---------- */
.button,
.woocommerce a.button,.woocommerce button.button,.woocommerce input.button,
.woocommerce a.button.alt,.woocommerce button.button.alt,.woocommerce input.button.alt,
.woocommerce #respond input#submit{border:1px solid var(--ink);background:var(--ink);color:var(--chalk);padding:17px 24px;display:inline-flex;align-items:center;justify-content:center;gap:30px;font-family:'Manrope',sans-serif;font-weight:600;font-size:13px;line-height:1.2;border-radius:4px;min-height:50px;text-decoration:none}
.button:hover,
.woocommerce a.button:hover,.woocommerce button.button:hover,.woocommerce input.button:hover,
.woocommerce a.button.alt:hover,.woocommerce button.button.alt:hover,.woocommerce input.button.alt:hover{background:#45413e;color:var(--chalk)}
.woocommerce button.button:disabled,.woocommerce button.button.alt:disabled,.button:disabled{opacity:.5;cursor:not-allowed;background:var(--ink);color:var(--chalk)}
.text-link{display:flex;align-items:center;gap:10px;font-size:12px;text-decoration:underline;text-underline-offset:4px}

/* ---------- Header ---------- */
.site-header{height:94px;margin:0 5%;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #ccc8c1;gap:25px}
.brand{display:flex;align-items:center;gap:10px;font-size:25px;font-weight:800;letter-spacing:-1.2px;line-height:1}
.brand-small{display:block;font-size:8px;letter-spacing:4px;margin-top:5px}
.custom-logo-link img{max-height:60px;width:auto}
.site-header nav ul{display:flex;gap:32px;font-size:13px;font-weight:600;list-style:none;margin:0;padding:0}
.site-header nav a{display:flex;align-items:center;gap:5px}
.bag{display:flex;align-items:center;gap:10px;font-size:13px;padding:12px}

/* ---------- Hero ---------- */
.hero{padding:30px 5% 0;position:relative}
.eyebrow,.section-label,.hero-caption,.package-note{font-size:10px;letter-spacing:1.5px;font-weight:700}
.eyebrow{display:flex;align-items:center;gap:9px}
.eyebrow>span:last-child{margin-left:auto}
.tiny-dot{width:7px;height:7px;background:var(--coral);border-radius:50%}
.hero h1 br{display:none}
.headline-star{position:absolute;right:5px;top:5px;width:60px;height:60px;transform:rotate(15deg)}
.hero-bottom{display:flex;align-items:center;gap:36px;margin-bottom:45px}
.hero-bottom p{font-size:13px;line-height:1.85;flex:1}
.art-wall{background:var(--lilac);height:420px;display:flex;align-items:center;justify-content:center;gap:5%;position:relative;overflow:hidden;padding:40px 9%}
.art-wall:before{content:'';position:absolute;inset:0;background-image:radial-gradient(#26262620 .7px,transparent .7px);background-size:5px 5px;opacity:.3}
.art-print{width:27%;max-width:260px;background:var(--chalk);padding:12px 12px 20px;box-shadow:8px 10px 0 #26262612;position:relative}
.art-print img{display:block;width:100%;object-fit:cover;aspect-ratio:1/1.05}
.art-print span{display:block;text-align:center;font-size:7px;letter-spacing:1.5px;font-weight:800;margin-top:15px}
.art-0{transform:rotate(-8deg)}
.art-1{transform:rotate(5deg);margin-top:-30px}
.art-2{transform:rotate(-5deg)}
.art-sticker{position:absolute;right:3%;bottom:23px;background:var(--coral);border-radius:50%;width:132px;height:132px;display:flex;align-items:center;justify-content:center;flex-direction:column;text-align:center;transform:rotate(12deg);font-size:12px;line-height:1.25;border:1px solid var(--ink)}
.art-sticker strong{font-size:17px}
.art-sticker span{font-size:27px}
.hero-caption{display:flex;justify-content:space-between;padding:18px 0;font-size:9px;letter-spacing:1px}
.hero-caption span:nth-child(2){font-weight:400;letter-spacing:0}

/* ---------- Process ---------- */
.process{margin-top:60px;background:var(--ink);color:var(--chalk);padding:60px 7% 70px}
.section-label{opacity:.7}
.process-title{display:flex;justify-content:space-between;align-items:end;margin:28px 0 48px}
.process-title>p{font-size:13px;line-height:1.8}
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:45px}
.step-index{color:var(--coral);font-family:'Barlow Condensed',sans-serif;font-size:58px}
.steps h3{font-size:16px;margin:15px 0;display:flex;justify-content:space-between;align-items:center}
.steps p{font-size:12px;line-height:1.9;color:#ccc8c1;max-width:290px}
.steps article{border-top:1px solid #ffffff35;padding-top:15px}

/* ---------- Packages ---------- */
.packages{padding:75px 5% 40px}
.package-heading{display:flex;justify-content:space-between;align-items:end;margin:25px 0 40px}
.package-heading p{font-size:12px;line-height:1.9}
.package-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.package{border:1px solid var(--line)}
.package-image{position:relative;display:block;overflow:hidden}
.package-image img{display:block;width:100%;object-fit:cover;aspect-ratio:1;transition:transform .3s}
.package-image:hover img{transform:scale(1.04)}
.package-image>span{position:absolute;left:12px;top:12px;background:var(--chalk);padding:5px 9px;font-size:10px}
.package-info{padding:21px 19px}
.package h3{font-size:17px;margin-bottom:13px;letter-spacing:-.5px}
.description{font-size:11px;line-height:1.9;color:var(--muted);min-height:86px}
.description p+p{margin-top:.8em}
.included{font-size:10px;display:flex;align-items:center;gap:5px;margin:17px 0}
.package-buy{display:flex;justify-content:space-between;align-items:center;border-top:1px solid var(--line);padding-top:14px}
.package-buy strong{font-size:19px;letter-spacing:-.5px}
.package-buy del{opacity:.5;font-size:.75em}
.package-buy ins{text-decoration:none}
.package-buy>a{border:1px solid var(--ink);width:44px;height:44px;display:flex;align-items:center;justify-content:center;border-radius:50%;background:var(--coral)}
.package-note{display:flex;justify-content:space-between;letter-spacing:0;padding:25px 0;font-size:11px}
.package-note span{font-weight:400}

/* ---------- FAQ ---------- */
.questions{display:grid;grid-template-columns:1fr 1.2fr;gap:60px;padding:55px 7% 90px;border-top:1px solid var(--line)}
.questions h2{margin-top:25px}
.faq-list details{border-bottom:1px solid var(--line);padding:20px 0}
.faq-list summary{display:flex;justify-content:space-between;cursor:pointer;font-size:13px;font-weight:600;list-style:none}
.faq-list summary::-webkit-details-marker{display:none}
.faq-list summary span{font-size:20px;transition:transform .2s}
.faq-list details[open] summary span{transform:rotate(45deg)}
.faq-list p{margin:15px 0 4px;font-size:12px;line-height:1.9;color:var(--muted)}

/* ---------- Footer ---------- */
.site-footer{background:var(--lilac);padding:40px 5%;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:25px}
.site-footer .brand{font-size:21px}
.site-footer p{font-size:11px}
.footer-links{display:flex;align-items:center;gap:20px;font-size:10px}
.footer-links ul{display:flex;gap:20px;list-style:none;margin:0;padding:0}
.footer-links>span{opacity:.65}

/* ---------- Package page ---------- */
.detail-page,.woocommerce div.product.detail-page{max-width:1000px;margin:65px auto;padding:0 25px;display:grid;grid-template-columns:1fr 1fr;gap:50px;align-items:start}
.woocommerce div.product.detail-page div.summary,.detail-page .summary{float:none;width:auto;margin:0;padding:0}
.detail-page .detail-image{display:block;width:100%;object-fit:cover;aspect-ratio:1}
.detail-page h1{font-size:65px;margin-top:20px}
.detail-page .description{font-size:14px;min-height:0;margin:25px 0}
.detail-page .price{font-size:22px;margin-bottom:6px}
.detail-page .price del{opacity:.5;font-size:.8em}
.detail-page .price ins{text-decoration:none}
.small{display:flex;align-items:center;gap:5px;font-size:11px;line-height:1.8;color:var(--muted);margin:8px 0}
.woocommerce .detail-page form.cart,.detail-page form.cart{margin:22px 0}
.woocommerce .detail-page form.cart .button{float:none;width:100%;margin-top:18px}
.detail-page form.cart div.quantity{display:none}
.detail-page .stock{font-size:12px}
.commission-form{border-top:1px solid var(--line);padding-top:20px;display:flex;flex-direction:column;gap:20px}
.commission-field{display:flex;flex-direction:column;gap:8px}
.commission-field label{font-size:13px;font-weight:600}
.commission-field .optional{font-weight:400;color:var(--muted)}
.commission-field input,.commission-field select,.commission-field textarea{width:100%;border:1px solid #ccc;border-radius:4px;padding:12px 14px;background:#fff;font:inherit;font-size:14px;color:var(--ink)}
.commission-field select{appearance:none;-webkit-appearance:none;padding-right:40px;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23262626' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 14px center;cursor:pointer}
.commission-field select:invalid{color:#9a958e}
.commission-field select option{color:var(--ink)}
.commission-field textarea{resize:vertical}
.commission-field input::placeholder,.commission-field textarea::placeholder{color:#9a958e}
.commission-field input:focus,.commission-field select:focus,.commission-field textarea:focus{border-color:var(--ink);outline:3px solid var(--coral);outline-offset:2px}
.pet-photos-field .small{margin-bottom:0}
.pet-photos-title{display:flex;align-items:center;gap:6px;font-size:13px;font-weight:600;margin-bottom:10px}
.pet-photo-previews{display:flex;gap:8px;flex-wrap:wrap}
.pet-photo-previews:not(:empty){margin-bottom:10px}
.pet-photo{position:relative;width:64px;height:64px}
.pet-photo img{display:block;width:100%;height:100%;object-fit:cover;border-radius:4px}
.pet-photo button{position:absolute;top:-7px;right:-7px;background:var(--ink);color:var(--chalk);border:0;border-radius:50%;width:20px;height:20px;padding:0;font-size:14px;line-height:1;display:flex;align-items:center;justify-content:center}
.pet-photos-upload{position:relative;display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:600;border:1px dashed #b8b3aa;padding:11px 14px;border-radius:4px;cursor:pointer;background:#fff}
.pet-photos-upload:hover{border-color:var(--ink)}
.pet-photos-upload:focus-within{outline:3px solid var(--coral);outline-offset:3px}
.pet-photos-upload input{position:absolute;inset:0;opacity:0;width:100%;height:100%;cursor:pointer}
.error{font-size:12px;color:#aa3220;margin:8px 0}

/* ---------- Generic pages (Cart, Checkout, My account, posts) ---------- */
.page-main{max-width:1100px;margin:0 auto;padding:55px 25px 90px;min-height:55vh}
.page-main .page-title{font-size:clamp(48px,6vw,72px);margin:0 0 35px}
.entry-content{font-size:15px;line-height:1.8}
.entry-content p{margin:0 0 1em}
.entry-content a{text-decoration:underline;text-underline-offset:3px}
.entry-title{font-size:40px;margin:30px 0 10px}
.page-main .products{list-style:none;padding:0}

/* WooCommerce notices & blocks */
.woocommerce-notices-wrapper{max-width:1000px;margin:20px auto 0;padding:0 25px}
.woocommerce-message,.woocommerce-info,.woocommerce-error{border-top-color:var(--coral)!important;background:#fff!important;font-size:13px}
.woocommerce-message::before,.woocommerce-info::before{color:var(--coral)!important}
.wc-block-components-button:not(.is-link){background:var(--ink);color:var(--chalk);border-radius:4px;min-height:50px;font-weight:600}
.wc-block-components-button:not(.is-link):hover{background:#45413e;color:var(--chalk)}
.wc-block-components-product-name{font-weight:700}

/* ---------- Contact forms (Fluent Forms) ---------- */
.faq-contact{margin-top:28px;font-weight:600}
.entry-content .fluentform{max-width:640px}
body .fluentform .ff-el-group{margin-bottom:22px}
body .fluentform .ff-el-input--label label{font-family:'Manrope',sans-serif;font-size:12px;font-weight:600;color:var(--ink)}
body .fluentform .ff-el-input--label.ff-el-is-required.asterisk-right label:after{color:var(--coral)}
body .fluentform .ff-el-form-control{font-family:'Manrope',sans-serif;font-size:14px;color:var(--ink);background:#fff;border:1px solid #ccc;border-radius:4px;padding:12px 14px;box-shadow:none}
body .fluentform .ff-el-form-control:focus{border-color:var(--ink);outline:3px solid var(--coral);outline-offset:2px;box-shadow:none}
body .fluentform .ff-el-form-control::placeholder{color:#9a958e}
body .fluentform .ff-btn.ff-btn-submit:not(.ff_btn_no_style){background:var(--ink);color:var(--chalk);border:1px solid var(--ink);border-radius:4px;min-height:50px;padding:15px 28px;font-family:'Manrope',sans-serif;font-size:13px;font-weight:600;box-shadow:none;opacity:1}
body .fluentform .ff-btn.ff-btn-submit:not(.ff_btn_no_style):hover{background:#45413e;color:var(--chalk)}
body .fluentform .ff-el-is-error .ff-el-form-control{border-color:#aa3220}
body .fluentform .error.text-danger,body .fluentform .ff-el-is-error .text-danger{color:#aa3220;font-size:12px}
body .ff-message-success{border:1px solid var(--line);border-top:3px solid var(--coral);background:#fff;box-shadow:none;padding:18px 20px;font-size:14px;line-height:1.7;max-width:640px}
body .ff-errors-in-stack{color:#aa3220;font-size:13px}

/* ---------- 404 ---------- */
.return-page{min-height:60vh;max-width:600px;margin:auto;padding:80px 25px}
.return-page h1{font-size:72px}
.return-page p{line-height:1.8;margin:25px 0}

/* ---------- Responsive ---------- */
@media (min-width:1450px){.hero{max-width:1600px;margin:auto}.art-wall{height:480px}}
@media (max-width:1000px){
	.hero h1 br{display:block}.headline-star{right:10%;top:20px}.hero-bottom{gap:20px}
	.art-wall{height:340px;padding:30px 5%}
	.package-grid{grid-template-columns:repeat(2,1fr)}.description{min-height:60px}
}
@media (max-width:640px){
	.site-header{height:78px;margin:0 6%}.site-header nav{display:none}.brand{font-size:22px}.bag{font-size:11px}
	.hero{padding:25px 6% 0}.eyebrow{font-size:8px;letter-spacing:1px}.eyebrow>span:last-child{display:none}
	h1{font-size:76px;margin:28px 0 22px}.headline-star{width:35px;right:0}
	.hero-bottom{flex-wrap:wrap;gap:18px;margin-bottom:30px}.hero-bottom p{flex-basis:100%;font-size:12px}
	.button,.woocommerce a.button,.woocommerce button.button,.woocommerce button.button.alt{gap:15px;padding:15px 18px;font-size:12px}
	.text-link{font-size:10px}
	.art-wall{height:290px;gap:4%;margin:0 -6.8%;padding:25px 6%}
	.art-print{width:36%;padding:7px 7px 12px;flex-shrink:0}.art-2{display:none}.art-print span{font-size:5px;margin-top:10px}
	.art-sticker{width:88px;height:88px;right:2%;bottom:15px;font-size:8px}.art-sticker strong{font-size:12px}.art-sticker span{font-size:17px}
	.hero-caption{font-size:7px;gap:20px;line-height:1.5}.hero-caption>span:nth-child(2){display:none}
	.process{margin-top:35px;padding:40px 7%}.process-title{display:block;margin-bottom:25px}.process-title>p{margin-top:20px}
	.steps{grid-template-columns:1fr;gap:25px}.steps article{display:grid;grid-template-columns:55px 1fr;column-gap:18px}
	.step-index{grid-row:span 2;font-size:46px}.steps h3{margin:6px 0 10px}.steps p{max-width:none}
	.packages{padding:45px 6% 20px}.package-heading{display:block;margin:20px 0 30px}.package-heading p{margin-top:20px}
	.package-grid{gap:14px}.package-info{padding:15px 12px}.package h3{font-size:14px;min-height:34px}
	.description{font-size:10px;min-height:115px}.included{font-size:8px}.package-buy strong{font-size:15px}
	.package-buy>a{width:36px;height:36px}
	.package-note{display:block;line-height:1.8}.package-note span{display:block}
	.questions{grid-template-columns:1fr;padding:35px 6% 55px;gap:15px}
	.site-footer{padding:30px 6%;display:block}.site-footer p{margin:20px 0}.footer-links,.footer-links ul{flex-wrap:wrap;gap:15px}
	.detail-page,.woocommerce div.product.detail-page{grid-template-columns:1fr;margin:35px auto;gap:25px}.detail-page h1{font-size:55px}
	.page-main{padding:35px 6% 60px}
	.return-page h1{font-size:58px}
}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important}}