/* Portrait product pages (template-portrait-product.php). Scoped under .ppd. */

.ppd {
    --ink: #0f2d4d;
    --text: #374151;
    --muted: #5b6472;
    --blue: #1776C8;
    --blue-d: #125A9C;
    --line: #e3eaf3;
    --soft: #f4f8fc;
    --head: 'Outfit', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    display: block;
    background: #fff;
    color: var(--text);
    font-family: 'Open Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    padding: 18px 0 64px;
}
.ppd *, .ppd *::before, .ppd *::after { box-sizing: border-box; }
.ppd .ppd-wrap { max-width: 1200px; margin: 0 auto; padding: 0 20px; }
.ppd .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* breadcrumbs (page-scoped: never nav.breadcrumb, see te-polish.css) */
.ppd .ppd-crumbs { list-style: none; margin: 0 0 16px; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 0; font-size: 13px; color: var(--muted); }
.ppd .ppd-crumbs li + li::before { content: "/"; margin: 0 8px; color: #b6c2d1; }
.ppd .ppd-crumbs a { color: var(--blue-d); text-decoration: none; }
.ppd .ppd-crumbs a:hover { text-decoration: underline; }

/* hero */
.ppd .ppd-hero { display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(0, 1fr); gap: 48px; align-items: start; }
.ppd .ppd-gallery { position: sticky; top: 140px; min-width: 0; }
.ppd .ppd-main { border-radius: 20px; overflow: hidden; background: #fff; border: 1px solid var(--line); aspect-ratio: 1 / 1; }
.ppd .ppd-main img { display: block; width: 100%; height: 100%; object-fit: cover; }
.ppd .ppd-thumbs { display: flex; gap: 10px; margin-top: 12px; }
.ppd .ppd-thumb { width: 84px; height: 84px; padding: 0; border-radius: 12px; overflow: hidden; border: 2px solid var(--line); background: #fff; cursor: pointer; transition: border-color .15s; }
.ppd .ppd-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ppd .ppd-thumb.is-on { border-color: var(--blue); }
.ppd .ppd-thumb:hover { border-color: #9ec8ec; }

.ppd .ppd-info { min-width: 0; }
.ppd .ppd-eyebrow { display: inline-block; margin: 0 0 10px; padding: 6px 12px; border-radius: 9999px; background: var(--soft); border: 1px solid #cfe3f6; color: var(--blue-d); font: 700 11.5px/1 var(--head); letter-spacing: .08em; text-transform: uppercase; }
.ppd .ppd-h1 { font: 800 clamp(28px, 3vw, 38px)/1.1 var(--head); letter-spacing: -.02em; color: var(--ink); margin: 0 0 10px; text-wrap: balance; }
.ppd .ppd-tagline { font-size: 16.5px; line-height: 1.55; margin: 0 0 18px; color: var(--text); }

.ppd .ppd-price { padding: 16px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); margin-bottom: 18px; }
.ppd .ppd-price-main { font: 800 32px/1 var(--head); color: var(--ink); margin: 0 0 8px; font-variant-numeric: tabular-nums; }
.ppd .ppd-from { font-size: 15px; font-weight: 600; color: var(--muted); }
.ppd .ppd-cur { font-size: 14px; font-weight: 600; color: var(--muted); }
.ppd .ppd-price-note { margin: 0 0 8px; font-size: 13.5px; line-height: 1.5; color: var(--muted); }
.ppd .ppd-reviews { margin: 0; font-size: 13.5px; color: var(--text); }
.ppd .ppd-reviews span { color: #f5a623; letter-spacing: 1px; margin-right: 4px; }

.ppd .ppd-pick { border: 0; margin: 0 0 16px; padding: 0; min-width: 0; }
.ppd .ppd-pick legend { font: 700 14px/1.2 var(--head); color: var(--ink); margin: 0 0 8px; padding: 0; border: 0; width: auto; }
.ppd .ppd-pick-val { font-weight: 500; color: var(--muted); margin-left: 6px; }
.ppd .ppd-looks { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.ppd .ppd-look { display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 8px 12px; border-radius: 12px; border: 1.5px solid var(--line); background: #fff; font: 600 14px/1.1 var(--head); color: var(--ink); cursor: pointer; text-align: left; transition: border-color .15s, background .15s; }
.ppd .ppd-look:hover { border-color: #9ec8ec; }
.ppd .ppd-look.is-on { border-color: var(--blue); background: var(--soft); box-shadow: inset 0 0 0 1px var(--blue); }
.ppd .ppd-sw { display: block; flex: 0 0 auto; width: 18px; height: 18px; border-radius: 50%; }
.ppd .ppd-sw--watercolour { background: radial-gradient(circle at 30% 32%, #8ccdf6 0 30%, transparent 58%), radial-gradient(circle at 70% 66%, #f5a9c6 0 30%, transparent 60%), radial-gradient(circle at 66% 26%, #fde49a 0 22%, transparent 52%), #eef6fd; }
.ppd .ppd-sw--stitched { background: #b97a4c; border: 1.5px dashed #fbe7d3; box-shadow: 0 0 0 1.5px #b97a4c; }
.ppd .ppd-sw--line-art { background: #fff linear-gradient(135deg, transparent 44%, #111827 44% 56%, transparent 56%); border: 1.5px solid #111827; }
.ppd .ppd-sw--cartoon { background: #fbbf24; border: 2.5px solid #111827; }

.ppd .ppd-colours { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.ppd .ppd-colour { width: 32px; height: 32px; padding: 0; border-radius: 50%; border: 2px solid #fff; background: var(--sw); box-shadow: 0 0 0 1px #c9d3df; cursor: pointer; transition: box-shadow .15s, transform .15s; }
.ppd .ppd-colour:hover { transform: scale(1.08); }
.ppd .ppd-colour.is-on { box-shadow: 0 0 0 2px var(--blue); }
.ppd .ppd-more { font-size: 12.5px; color: var(--muted); margin-left: 4px; }
.ppd .ppd-pick-note { margin: 8px 0 0; font-size: 12.5px; color: var(--muted); }

.ppd .ppd-place { display: flex; align-items: center; gap: 12px; margin: 4px 0 18px; padding: 12px 14px; border-radius: 12px; background: var(--soft); color: var(--blue-d); font-size: 13.5px; line-height: 1.45; }
.ppd .ppd-place svg { flex: 0 0 auto; }
.ppd .ppd-place span { color: var(--text); }
.ppd .ppd-place b { color: var(--ink); }

.ppd .ppd-cta { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; min-height: 56px; padding: 14px 24px; border-radius: 9999px; background: linear-gradient(135deg, #125A9C 0%, #1776C8 50%, #2B90E7 100%); color: #fff !important; font: 700 17px/1.1 var(--head); text-decoration: none !important; box-shadow: 0 4px 14px rgba(23, 118, 200, .3), inset 0 1px 0 rgba(255, 255, 255, .2); transition: transform .18s, box-shadow .18s; }
.ppd .ppd-cta:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(23, 118, 200, .38); }
.ppd .ppd-cta:focus-visible, .ppd button:focus-visible, .ppd a:focus-visible { outline: 3px solid #2B90E7; outline-offset: 3px; }
.ppd .ppd-cta-note { text-align: center; margin: 10px 0 16px; font-size: 13px; color: var(--muted); }
.ppd .ppd-trust { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 18px; font-size: 13.5px; color: var(--text); }
.ppd .ppd-trust li { display: inline-flex; align-items: center; gap: 6px; }
.ppd .ppd-trust svg { color: #10b981; }

/* sections */
.ppd .ppd-h2 { font: 800 24px/1.2 var(--head); color: var(--ink); letter-spacing: -.01em; margin: 0 0 16px; }
.ppd .ppd-steps { margin-top: 56px; padding: 32px; border-radius: 20px; background: var(--soft); }
.ppd .ppd-steps ol { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.ppd .ppd-steps li { display: flex; flex-direction: column; gap: 4px; }
.ppd .ppd-steps b { font: 700 16px/1.3 var(--head); color: var(--ink); }
.ppd .ppd-steps li > span:last-child { font-size: 14px; line-height: 1.55; color: var(--text); }
.ppd .ppd-n { width: 32px; height: 32px; border-radius: 50%; background: var(--blue); color: #fff; display: inline-flex; align-items: center; justify-content: center; font: 800 15px/1 var(--head); margin-bottom: 6px; }

.ppd .ppd-details { margin-top: 56px; display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 48px; }
.ppd .ppd-about p { font-size: 15px; line-height: 1.7; margin: 0 0 14px; max-width: 65ch; }
.ppd .ppd-about ul { margin: 0 0 14px; padding-left: 20px; font-size: 14.5px; line-height: 1.7; }
.ppd .ppd-more-link a { color: var(--blue-d); font-weight: 600; }
.ppd .ppd-sizes table { width: 100%; border-collapse: collapse; font-size: 14.5px; font-variant-numeric: tabular-nums; }
.ppd .ppd-sizes th { text-align: left; font: 700 12px/1 var(--head); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); padding: 0 0 10px; border-bottom: 1px solid var(--line); }
.ppd .ppd-sizes td { padding: 10px 0; border-bottom: 1px solid #eef2f7; }
.ppd .ppd-sizes tr.is-out td { color: #9aa4b2; }
.ppd .ppd-small { font-size: 12.5px; color: var(--muted); margin: 10px 0 0; }

.ppd .ppd-faq { margin-top: 56px; max-width: 820px; }
.ppd .ppd-faq details { border-bottom: 1px solid var(--line); padding: 14px 0; }
.ppd .ppd-faq summary { cursor: pointer; font: 700 16px/1.35 var(--head); color: var(--ink); list-style: none; display: flex; justify-content: space-between; gap: 12px; }
.ppd .ppd-faq summary::-webkit-details-marker { display: none; }
.ppd .ppd-faq summary::after { content: "+"; color: var(--blue); font-size: 20px; line-height: 1; }
.ppd .ppd-faq details[open] summary::after { content: "–"; }
.ppd .ppd-faq p { margin: 10px 0 0; font-size: 14.5px; line-height: 1.65; }

.ppd .ppd-related { margin-top: 56px; }
.ppd .ppd-related ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
.ppd .ppd-related a { display: flex; flex-direction: column; gap: 4px; text-decoration: none !important; color: inherit; }
.ppd .ppd-related img { width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: cover; border-radius: 16px; border: 1px solid var(--line); margin-bottom: 6px; transition: transform .2s; }
.ppd .ppd-related a:hover img { transform: translateY(-3px); }
.ppd .ppd-related b { font: 700 15px/1.3 var(--head); color: var(--ink); }
.ppd .ppd-related span { font-size: 13.5px; color: var(--muted); }

/* phone sticky bar */
.ppd .ppd-bar { display: none; }

@media (max-width: 991px) {
    .ppd .ppd-hero { grid-template-columns: minmax(0, 1fr); gap: 24px; }
    .ppd .ppd-gallery { position: static; }
    .ppd .ppd-details { grid-template-columns: minmax(0, 1fr); gap: 32px; }
    .ppd .ppd-related ul { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 767px) {
    .ppd { padding: 12px 0 88px; }
    .ppd .ppd-wrap { padding: 0 16px; }
    .ppd .ppd-crumbs { font-size: 12px; margin-bottom: 12px; }
    .ppd .ppd-main { border-radius: 16px; }
    .ppd .ppd-thumb { width: 64px; height: 64px; }
    .ppd .ppd-h1 { font-size: 27px; }
    .ppd .ppd-tagline { font-size: 15px; }
    .ppd .ppd-price-main { font-size: 28px; }
    .ppd .ppd-steps { margin-top: 40px; padding: 24px 18px; }
    .ppd .ppd-steps ol { grid-template-columns: minmax(0, 1fr); gap: 18px; }
    .ppd .ppd-details, .ppd .ppd-faq, .ppd .ppd-related { margin-top: 40px; }
    .ppd .ppd-h2 { font-size: 21px; }
    .ppd .ppd-related ul { gap: 12px; }
    .ppd .ppd-bar {
        display: flex; align-items: center; gap: 12px;
        /* sits on top of the site's phone tab bar (#te-tabbar: 64 px plus its raised Design button) */
        position: fixed; left: 0; right: 0; bottom: calc(78px + env(safe-area-inset-bottom, 0px)); z-index: 9990;
        padding: 10px 16px;
        background: rgba(255, 255, 255, .97); border-top: 1px solid var(--line);
        box-shadow: 0 -6px 18px rgba(15, 45, 77, .08);
        transform: translateY(calc(100% + 64px)); transition: transform .25s ease;
    }
    .ppd .ppd-bar.is-shown { transform: none; }
    .ppd .ppd-bar-price { font: 800 16px/1.1 var(--head); color: var(--ink); white-space: nowrap; }
    .ppd .ppd-cta--bar { min-height: 48px; padding: 10px 16px; font-size: 15px; flex: 1; }
}

@media (prefers-reduced-motion: reduce) {
    .ppd .ppd-cta, .ppd .ppd-colour, .ppd .ppd-related img { transition: none; }
}