/* PlayCase site-wide rules (formerly the Bricks child theme's style.css, in the same order). */

/* Titan One is for headlines. Form labels and FAQ questions read better in the body face. */
:is(.wsf-form, .wsf-form-canvas) :is(legend, .wsf-label),
.pc-add-to-cart :is(label, legend) {
	font-family: var(--text-font-family, "Inter"), sans-serif !important;
	font-weight: 600;
}

/* Accent rule: yellow (--secondary) is for dark backgrounds; on light ones the
   accent is PlayCase red (--tertiary). These elements sit on light sections. */
html body .wsf-form select.wsf-field:not([multiple]):not([size]):not([data-wsf-select2]) + span.wsf-select-arrow {
	border-top-color: var(--tertiary) !important;
}
html body :is(.playcase-form, .faceplate-form, .pc-add-to-cart, .product-details-and-cart) .wsf-form select.wsf-field:not([multiple]):not([size]):not([data-wsf-select2]) + span.wsf-select-arrow {
	border-top-color: var(--secondary) !important;
}

/* Hand-drawn button shapes (js/button-shapes.js draws the SVG). The header's Shop PlayCase joins the red family. */
.pch-btn__shape { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.pch-btn__shape path { fill: var(--btn-bg); transition: fill .3s ease; }
.pc-header .pc-header-shop { --btn-bg: var(--tertiary); position: relative; isolation: isolate; background: transparent !important; border: 0 !important; border-radius: 0 !important; color: #fff !important; font-family: var(--text-font-family, "Inter"), sans-serif !important; font-weight: 700; font-size: 1.5rem; text-transform: none; padding: .8em 1.4em; line-height: 1; margin-right: 1.2rem; }
.pc-header .pc-header-shop:not(.has-shape) { background: var(--tertiary) !important; border-radius: 12px !important; }
.pc-header .pc-header-shop:hover { --btn-bg: var(--black); }
.pc-header .pc-header-shop { white-space: nowrap; }
/* Header nav: a hand-drawn blob grows in behind the hovered link; the current page sits on a yellow blob. */
.pc-nav .pc-nav__list > li > a { position: relative; isolation: isolate; padding: .55em 1em !important; text-decoration: none !important; }
.pc-nav .pc-nav__list > li > a::before { content: ""; position: absolute; inset: -.1em -.2em; z-index: -1; background: var(--pc-nav-blob, #ece7dc); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 60' preserveAspectRatio='none'%3E%3Cpath d='M14 5C50 2 150 1 186 4C196 5 199 12 199 22C200 30 200 38 198 46C197 54 192 57 184 57C150 59 50 59 16 57C7 56 2 51 1 42C0 34 0 26 2 17C3 10 7 6 14 5Z'/%3E%3C/svg%3E") center / 100% 100% no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 60' preserveAspectRatio='none'%3E%3Cpath d='M14 5C50 2 150 1 186 4C196 5 199 12 199 22C200 30 200 38 198 46C197 54 192 57 184 57C150 59 50 59 16 57C7 56 2 51 1 42C0 34 0 26 2 17C3 10 7 6 14 5Z'/%3E%3C/svg%3E") center / 100% 100% no-repeat; opacity: 0; transform: scale(.55) rotate(var(--pc-nav-tilt, -2deg)); transition: transform .3s cubic-bezier(.34, 1.4, .64, 1), opacity .2s ease; }
.pc-nav .pc-nav__list > li:nth-child(2n) > a { --pc-nav-tilt: 2.5deg; }
.pc-nav .pc-nav__list > li:nth-child(3n) > a { --pc-nav-tilt: -3.5deg; }
.pc-nav .pc-nav__list > li > a:is(:hover, :focus-visible)::before { opacity: 1; transform: scale(1) rotate(var(--pc-nav-tilt, -2deg)); }
.pc-nav .pc-nav__list > li:is(.current-menu-item, .current-menu-ancestor, .current_page_item) > a::before { --pc-nav-blob: var(--secondary); opacity: 1; transform: scale(1) rotate(var(--pc-nav-tilt, -2deg)); }
@media (prefers-reduced-motion: reduce) { .pc-nav .pc-nav__list > li > a::before { transition: opacity .2s ease; transform: rotate(var(--pc-nav-tilt, -2deg)); } }

/* Phone menu sheet (footer.php, js/nav.js). */
.pc-mnav-lock, .pc-mnav-lock body { overflow: hidden; }
.pc-mnav { position: fixed; inset: 0; z-index: 100000; display: flex; flex-direction: column; gap: 2.4rem; padding: 1.6rem 2.4rem 3.2rem; background: var(--base, #fdfcfb); overflow-y: auto; transform: translateY(-100%); transition: transform .25s cubic-bezier(.2, .8, .2, 1); }
.pc-mnav.is-open { transform: none; }
.pc-mnav__top { display: flex; align-items: center; justify-content: space-between; }
.pc-mnav__logo img { height: 2.4rem; width: auto; }
.pc-mnav__close { all: unset; cursor: pointer; width: 4.4rem; height: 4.4rem; display: grid; place-items: center; font-size: 2.4rem; border-radius: 50%; }
.pc-mnav__close:hover, .pc-mnav__close:focus-visible { background: #ece7dc; }
.pc-mnav__list { list-style: none; margin: 1.6rem 0 0; padding: 0; display: grid; gap: .4rem; }
.pc-mnav__list a { position: relative; isolation: isolate; display: inline-block; padding: .25em .4em; font: 400 4rem/1.05 "Titan One", sans-serif; text-transform: uppercase; color: var(--black, #111); text-decoration: none; }
.pc-mnav__list .current-menu-item > a::before, .pc-mnav__list a:hover::before { content: ""; position: absolute; inset: 0 -.2em; z-index: -1; border-radius: 40% 55% 45% 50% / 55% 45% 55% 45%; background: var(--secondary); transform: rotate(-2deg); }
.pc-mnav__list li:not(.current-menu-item) > a:hover::before { background: #ece7dc; }
.pc-mnav .pc-mnav__shop { position: relative; isolation: isolate; align-self: flex-start; display: inline-flex; gap: .7em; padding: 1.1em 1.7em; color: #fff; font: 700 1.8rem/1 var(--text-font-family, Inter), sans-serif; text-decoration: none; --btn-bg: var(--tertiary); }
.pc-mnav .pc-mnav__shop:not(.has-shape) { background: var(--tertiary); border-radius: 12px; }
.pc-mnav .pc-mnav__shop:hover { --btn-bg: var(--black); }
.pc-mnav__small { list-style: none; margin: auto 0 0; padding: 2rem 0 0; border-top: 1px solid rgba(0,0,0,.12); display: flex; flex-wrap: wrap; gap: 1.2rem 2.4rem; }
.pc-mnav__small a { font: 600 1.6rem/1 var(--text-font-family, Inter), sans-serif; color: var(--black, #111); }
@media (min-width: 1280px) { .pc-mnav { display: none !important; } }
@media (prefers-reduced-motion: reduce) { .pc-mnav { transition: none; } }

/* Home hero: the animated 3D PlayCase (js/hero-3d.js) replaces the two phone images once it's ready.
   The canvas overhangs the stage a little so the turned, tipped phone isn't clipped. */
.pch-hero .pch-stage .pch-hero3d { position: absolute; inset: -8%; width: 116%; height: 116%; z-index: 3; opacity: 0; pointer-events: none; filter: drop-shadow(0 22px 26px rgba(0, 0, 0, .25)); }
/* Hero: just the red blob while the 3D PlayCase loads. The photos are the fallback only: shown when 3D can't run
   (js/hero-3d.js adds .no-3d), or after 8s if the script never ran at all. */
.pch-hero .pch-stage .pch-phone-front, .pch-hero .pch-stage .pch-phone-back { opacity: 0; animation: pch-hero-fallback .4s 8s forwards; }
.pch-hero .pch-stage.is-3d .pch-phone-front, .pch-hero .pch-stage.is-3d .pch-phone-back { animation: none; opacity: 0; }
.pch-hero .pch-stage.no-3d .pch-phone-front, .pch-hero .pch-stage.no-3d .pch-phone-back { animation: none; opacity: 1; transition: opacity .4s; }
@keyframes pch-hero-fallback { to { opacity: 1; } }


/* Home hero: the red blob grows in from nothing, from its centre, on load. */
.pch-hero .pch-blob { animation: pch-blob-in .9s .1s cubic-bezier(.34, 1.45, .64, 1) both; }
@keyframes pch-blob-in { from { transform: scale(0); } to { transform: scale(1); } }
@media (prefers-reduced-motion: reduce) { .pch-hero .pch-blob { animation: none; } }

/* Home hero title: "Pocket." starts lower, and snaps up onto "Classic Controls," with the
   faceplate (js/hero-3d.js drives --pch-split, --pch-in1/2 and --pch-jig on .pch-hero__copy, on the same clock as the 3D
   snap). The line under the title fades in as they snap, since the dropped line would sit on it. If 3D can't run
   everything sits in place; if the 3D isn't ready 4s in (slow load, script never runs) it settles in on its own and the 3D arrives without it. */
@property --pch-split { syntax: "<number>"; inherits: true; initial-value: 1; }
@property --pch-in1 { syntax: "<number>"; inherits: true; initial-value: 0; }
@property --pch-in2 { syntax: "<number>"; inherits: true; initial-value: 0; }
/* The title fades in with the 3D: "Classic Controls, Modern" (both .pch-line1) with the case, "Pocket." with the faceplate. */
.pch-hero .pch-line1 { opacity: var(--pch-in1); }
/* "Classic Controls, Modern" is the phone: it starts higher and is drawn down to meet "Pocket.", which is pulled up. The lines
   stay level the whole way (user, 2026-10-19: angles looked weird); the contact jiggle is a small vertical bounce. */
.pch-hero .pch-line1 { display: inline-block; transform: translateY(calc(var(--pch-split) * -.35em + var(--pch-jig, 0) * -.012em)); }
@media (max-width: 767px) { .pch-hero .pch-line1 { transform: translateY(calc(var(--pch-jig, 0) * -.012em)); } }   /* phones: it stays put (starting higher it would touch the faceplate above); only "Pocket." moves */
.pch-hero .pch-hero__copy { animation: pch-title-fallback .4s 4s both; }   /* the title never waits long: if the 3D isn't ready by 4s it settles in on its own */
@keyframes pch-title-fallback { from { --pch-split: 1; --pch-in1: 0; --pch-in2: 0; } to { --pch-split: 0; --pch-in1: 1; --pch-in2: 1; } }
.pch-hero .pch-line2 { opacity: var(--pch-in2); display: inline-block; transform: translateY(calc(var(--pch-split) * .55em + var(--pch-jig, 0) * .03em)); }
.pch-hero .pch-lede { opacity: calc(1 - var(--pch-split) * 4); }   /* in over the last quarter of the closing: the magnet's yank */
.pch-hero:has(.pch-stage.is-3d) .pch-hero__copy { animation: none; }
.pch-hero:has(.pch-stage.no-3d) .pch-hero__copy { animation: none; --pch-split: 0; --pch-in1: 1; --pch-in2: 1; }
@media (prefers-reduced-motion: reduce) { .pch-hero .pch-hero__copy { animation: none; --pch-split: 0; --pch-in1: 1; --pch-in2: 1; } }

/* Home hero: the magnets' snap bounces the Shop PlayCase button up, a black drop shadow opening underneath, and back
   down (js/hero-3d.js sets --pch-pop, 0..1, on .pch-hero__copy on the snap's clock). */
.pch-hero .pch-row .pch-btn-red { transition: background-color .2s, color .2s;   /* no transform easing: the hop follows the snap frame by frame */
	transform: translateY(calc(var(--pch-pop, 0) * -1.4rem)); filter: drop-shadow(0 calc(var(--pch-pop, 0) * 1.4rem) calc(var(--pch-pop, 0) * .8rem) rgba(0, 0, 0, calc(var(--pch-pop, 0) * .55))); }

/* Site footer (parts/footer.php): ink, the logo and socials, four link columns. Yellow
   is the accent on dark (hover, column titles). */
.pcf { --pcf-ink: #111; --pcf-text: #d9d6cf; --pcf-muted: #9a968d; --pcf-rule: rgba(255, 255, 255, .14); background: var(--pcf-ink); color: var(--pcf-text); padding: clamp(5.6rem, 4rem + 3vw, 8.8rem) clamp(2rem, 1rem + 4vw, 8rem) 3.2rem; font: 400 1.6rem/1.5 var(--text-font-family, Inter), sans-serif; }
.pcf__top, .pcf__bottom { max-width: 127.2rem; margin-inline: auto; width: 100%; }
.pcf__top { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2.2fr); gap: 4.8rem; align-items: start; }
.pcf-brand { display: flex; flex-direction: column; align-items: flex-start; gap: 1.6rem; }
.pcf-logo { display: block; }
.pcf-logo img { display: block; width: 18rem; height: auto; }
.pcf-line { margin: 0; color: var(--pcf-muted); max-width: 22em; }
.pcf-social { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; margin-top: .4rem; }
.pcf-social .pcf-icon { width: 4.2rem; height: 4.2rem; display: grid; place-items: center; border-radius: 50%; font-size: 2rem; line-height: 1; color: #fff; transition: background-color .2s ease, color .2s ease; }
.pcf-social .pcf-icon svg { width: 2rem; height: 2rem; fill: currentColor; }
.pcf-social .pcf-icon:hover { background: rgba(255, 255, 255, .1); color: var(--secondary, #ffde3b); }
.pcf-cols { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 3.2rem; }
.pcf-col__t { margin: 0 0 1.6rem; font: 400 1.5rem/1 "Titan One", sans-serif; text-transform: uppercase; letter-spacing: .04em; color: #fff; }
.pcf-col ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 1.1rem; }
.pcf-col li { margin: 0; }
.pcf-col a, .pcf-cookie { font: 500 1.6rem/1.3 var(--text-font-family, Inter), sans-serif; color: var(--pcf-text); text-decoration: none; transition: color .2s ease; }
.pcf-cookie { all: unset; cursor: pointer; font: 500 1.6rem/1.3 var(--text-font-family, Inter), sans-serif; color: var(--pcf-text); }
.pcf-col a:hover, .pcf-cookie:hover { color: var(--secondary, #ffde3b); }
.pcf a:focus-visible, .pcf-cookie:focus-visible { outline: 3px solid var(--secondary, #ffde3b); outline-offset: 3px; border-radius: .4rem; }
.pcf__bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .8rem 2.4rem; margin-top: clamp(4.8rem, 3rem + 3vw, 7.2rem); padding-top: 2.4rem; border-top: 1px solid var(--pcf-rule); }
.pcf__bottom p { margin: 0; font-size: 1.4rem; color: var(--pcf-muted); }
@media (max-width: 991px) {
	.pcf__top { grid-template-columns: minmax(0, 1fr); gap: 4rem; }
	.pcf-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 3.2rem 2.4rem; }
}
@media (max-width: 480px) {
	.pcf-brand { align-items: center; text-align: center; }
	.pcf-social { justify-content: center; }
	.pcf__bottom { flex-direction: column; align-items: center; text-align: center; }
}

/* Return label bar (includes/return-label-cart.php): shown while a return shipping label is in the cart. */
.pc-label-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .6rem 1.6rem; padding: 1.2rem 2rem; background: #111; color: #fff; font: 500 1.5rem/1.4 var(--text-font-family, Inter), sans-serif; text-align: center; }
.pc-label-bar a { font-weight: 700; text-decoration: underline; text-underline-offset: .2em; }
.pc-label-bar__go { color: #ffde3b; }
.pc-label-bar__rm { color: #fff; opacity: .8; }
.pc-label-bar a:hover { opacity: 1; color: #ffde3b; }

/* Secondary links (red text with an arrow: .pcm-link on the redesigned pages, .pch-textlink on the home page): on hover
   the arrow bounces forward, a small echo of the main button's colour change. */
@keyframes pc-arrow-bounce { 0%, 100% { transform: translateX(0); } 40% { transform: translateX(.32em); } 65% { transform: translateX(.08em); } 82% { transform: translateX(.2em); } }
.pcm-link .pcm-ico, .pch-textlink .pc-icon, .pch-textlink svg { transition: transform .2s ease; }
.pcm-link:hover .pcm-ico, .pcm-link:focus-visible .pcm-ico, .pch-textlink:hover .pc-icon, .pch-textlink:hover svg { animation: pc-arrow-bounce .9s cubic-bezier(.34, 1.45, .64, 1) infinite; }
@media (prefers-reduced-motion: reduce) { .pcm-link:hover .pcm-ico, .pcm-link:focus-visible .pcm-ico, .pch-textlink:hover .pc-icon, .pch-textlink:hover svg { animation: none; transform: translateX(.2em); } }