/*
Theme Name: Play Kings
Theme URI: https://playkings.co.uk
Author: Play Kings
Author URI: https://playkings.co.uk
Description: A premium, SEO-first WooCommerce theme for Play Kings - jukeboxes, arcade machines, components, flat pack and everything for the home games room. Features a fully back-end customisable 4-slide hero, hand-coded SEO with Open Graph and Twitter Card support, and a black/gold/silver brand palette.
Version: 1.9.0
Requires at least: 6.0
Tested up to: 6.6
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: playkings
Tags: e-commerce, woocommerce, custom-colors, custom-logo, custom-menu, featured-images, full-width-template, threaded-comments, translation-ready
WC requires at least: 6.0
WC tested up to: 9.0
*/

/* =========================================================
   PLAY KINGS - Design tokens
   Colours are also mirrored into the WordPress Customizer,
   so the values below act as sensible defaults.
   ========================================================= */
:root {
    --pk-black:        #0d0d0f;
    --pk-dark:         #16161a;
    --pk-dark-2:       #1f1f25;
    --pk-panel:        #202028;
    --pk-line:         #33333d;
    --pk-gold:         #d4af37;
    --pk-gold-light:   #f5d98b;
    --pk-gold-deep:    #a9822a;
    --pk-silver:       #d9dde2;
    --pk-silver-dark:  #9aa0a8;
    --pk-text:         #e9eaee;
    --pk-muted:        #a2a6ad;
    --pk-white:        #ffffff;
    --pk-success:      #3fbf7f;
    --pk-danger:       #e5484d;

    --pk-gold-gradient:   linear-gradient(135deg, #f5d98b 0%, #d4af37 45%, #a9822a 100%);
    --pk-silver-gradient: linear-gradient(135deg, #ffffff 0%, #d9dde2 45%, #9aa0a8 100%);

    --pk-radius:       10px;
    --pk-radius-lg:    16px;
    --pk-shadow:       0 10px 30px rgba(0,0,0,0.45);
    --pk-shadow-gold:  0 8px 26px rgba(212,175,55,0.22);
    --pk-maxw:         1240px;
    --pk-font-head:    'Cinzel', 'Times New Roman', serif;
    --pk-font-body:    'Montserrat', 'Segoe UI', system-ui, -apple-system, sans-serif;
    --pk-transition:   0.25s ease;
    --pk-logo-height:  90px; /* Adjustable in Customizer -> Header & Logo */
}

/* =========================================================
   Base
   ========================================================= */
*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
    margin: 0;
    font-family: var(--pk-font-body);
    font-size: 16px;
    line-height: 1.65;
    color: var(--pk-text);
    background: var(--pk-black);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

img { max-width: 100%; height: auto; display: block; }

a {
    color: var(--pk-gold);
    text-decoration: none;
    transition: color var(--pk-transition);
}
a:hover { color: var(--pk-gold-light); }

h1, h2, h3, h4, h5, h6 {
    font-family: var(--pk-font-head);
    color: var(--pk-white);
    line-height: 1.2;
    letter-spacing: 0.5px;
    margin: 0 0 0.6em;
    font-weight: 600;
}
h1 { font-size: clamp(2rem, 5vw, 3.25rem); }
h2 { font-size: clamp(1.6rem, 3.5vw, 2.4rem); }
h3 { font-size: clamp(1.25rem, 2.5vw, 1.6rem); }

p { margin: 0 0 1.1em; }

.pk-container {
    width: 100%;
    max-width: var(--pk-maxw);
    margin-inline: auto;
    padding-inline: 24px;
}

.pk-gold-text {
    background: var(--pk-gold-gradient);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: var(--pk-gold);
}

.screen-reader-text {
    position: absolute !important;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0,0,0,0);
    white-space: nowrap; border: 0;
}

.skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
    background: var(--pk-gold);
    color: var(--pk-black);
    padding: 10px 16px;
    z-index: 100000;
    border-radius: 0 0 var(--pk-radius) 0;
    font-weight: 600;
}
.skip-link:focus { left: 0; }

/* =========================================================
   Buttons
   ========================================================= */
.pk-btn,
.pk-btn:visited {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-family: var(--pk-font-body);
    font-weight: 700;
    font-size: 0.95rem;
    letter-spacing: 0.4px;
    text-transform: uppercase;
    padding: 14px 30px;
    border-radius: 50px;
    border: none;
    cursor: pointer;
    transition: transform var(--pk-transition), box-shadow var(--pk-transition), filter var(--pk-transition);
}
.pk-btn--gold {
    background: var(--pk-gold-gradient);
    color: #1a1408;
    box-shadow: var(--pk-shadow-gold);
}
.pk-btn--gold:hover {
    color: #1a1408;
    transform: translateY(-2px);
    filter: brightness(1.05);
}
.pk-btn--ghost {
    background: transparent;
    color: var(--pk-white);
    border: 1.5px solid var(--pk-gold);
}
.pk-btn--ghost:hover {
    background: rgba(212,175,55,0.12);
    color: var(--pk-gold-light);
    transform: translateY(-2px);
}

/* =========================================================
   Header
   ========================================================= */
.pk-site-header {
    position: sticky;
    top: 0;
    z-index: 999;
    background: rgba(13,13,15,0.95);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--pk-line);
}

/* ---- Row 1: main nav with centred logo ---- */
.pk-header-main { border-bottom: 1px solid rgba(255,255,255,0.05); }
.pk-header-grid {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 20px;
    min-height: calc(var(--pk-logo-height) + 30px);
    padding-block: 12px;
}
.pk-branding { display: flex; align-items: center; justify-content: center; }
.pk-branding img,
.pk-branding .custom-logo,
.pk-branding .custom-logo-link img {
    height: var(--pk-logo-height);
    width: auto;
    max-width: 100%;
}
.pk-site-title {
    font-family: var(--pk-font-head);
    font-size: 1.6rem;
    letter-spacing: 2px;
    margin: 0;
    color: var(--pk-white);
    text-transform: uppercase;
    text-align: center;
}
.pk-site-title a { color: inherit; }
.pk-site-desc { font-size: 0.66rem; color: var(--pk-silver-dark); letter-spacing: 3px; text-transform: uppercase; margin: 2px 0 0; text-align: center; }

/* Split menus each side of the logo */
.pk-nav--left .pk-menu  { justify-content: flex-end; }
.pk-nav--right .pk-menu { justify-content: flex-start; }
.pk-primary-nav .pk-menu {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 2px;
    margin: 0;
    padding: 0;
}
.pk-primary-nav a {
    display: block;
    color: var(--pk-text);
    padding: 9px 13px;
    font-size: 0.82rem;
    font-weight: 600;
    letter-spacing: 0.4px;
    text-transform: uppercase;
    border-radius: var(--pk-radius);
    white-space: nowrap;
}
.pk-primary-nav a:hover,
.pk-primary-nav .current-menu-item > a {
    color: var(--pk-gold);
    background: rgba(212,175,55,0.08);
}
.pk-primary-nav .pk-menu > li { position: relative; }
.pk-primary-nav .sub-menu {
    position: absolute;
    top: 100%;
    left: 0;
    display: none;
    flex-direction: column;
    background: var(--pk-dark-2);
    border: 1px solid var(--pk-line);
    border-radius: var(--pk-radius);
    min-width: 220px;
    padding: 8px;
    box-shadow: var(--pk-shadow);
    list-style: none;
    z-index: 20;
}
.pk-nav--right .sub-menu { left: auto; right: 0; }
.pk-primary-nav li:hover > .sub-menu { display: flex; }
.pk-primary-nav .sub-menu a { text-transform: none; letter-spacing: 0; font-weight: 500; }

/* ---- Row 2: utility bar ---- */
.pk-header-util { background: rgba(0,0,0,0.35); }
.pk-util-grid {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 24px;
    min-height: 44px;
}

/* Marquee */
.pk-marquee { overflow: hidden; position: relative; min-width: 0; }
.pk-marquee__track { display: inline-flex; flex-wrap: nowrap; white-space: nowrap; will-change: transform; animation: pk-marquee 30s linear infinite; }
.pk-marquee:hover .pk-marquee__track { animation-play-state: paused; }
.pk-marquee__item { padding-right: 48px; font-size: 0.82rem; color: var(--pk-silver); }
.pk-marquee__item a { color: var(--pk-gold); text-decoration: none; }
.pk-marquee__item a:hover { color: var(--pk-gold-light); text-decoration: underline; }
@keyframes pk-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* Utility links */
.pk-util-links { display: flex; align-items: center; gap: 4px; }
.pk-util-link {
    display: inline-flex; align-items: center; gap: 6px;
    color: var(--pk-silver); font-size: 0.74rem; font-weight: 600;
    letter-spacing: 0.6px; text-transform: uppercase;
    padding: 8px 12px; border-radius: var(--pk-radius); white-space: nowrap;
}
.pk-util-link + .pk-util-link { border-left: 1px solid var(--pk-line); border-radius: 0; }
.pk-util-link:hover { color: var(--pk-gold); }
.pk-util-link--accent { color: var(--pk-gold); }
.pk-util-link--accent:hover { color: var(--pk-gold-light); }
.pk-util-link--cart .pk-cart-count {
    position: static; background: var(--pk-gold); color: var(--pk-black);
    font-size: 0.68rem; font-weight: 700; min-width: 18px; height: 18px;
    padding: 0 4px; border-radius: 50px; display: inline-flex; align-items: center; justify-content: center;
}

/* Mobile toggle + panel */
.pk-menu-toggle {
    display: none;
    background: none;
    border: 1px solid var(--pk-line);
    color: var(--pk-text);
    width: 46px; height: 46px;
    border-radius: var(--pk-radius);
    cursor: pointer;
    font-size: 1.3rem;
    justify-self: end;
}
.pk-mobile-nav {
    display: none;
    border-top: 1px solid var(--pk-line);
    background: var(--pk-dark);
    padding: 14px 24px 20px;
    max-height: 75vh;
    overflow-y: auto;
}
.pk-mobile-nav.is-open { display: block; }
.pk-mobile-menu, .pk-mobile-menu .sub-menu { list-style: none; margin: 0; padding: 0; }
.pk-mobile-menu a { display: block; color: var(--pk-text); padding: 12px 6px; font-weight: 600; text-transform: uppercase; font-size: 0.86rem; letter-spacing: 0.5px; border-bottom: 1px solid rgba(255,255,255,0.05); }
.pk-mobile-menu a:hover { color: var(--pk-gold); }
.pk-mobile-menu .sub-menu a { padding-left: 20px; text-transform: none; font-weight: 500; }
.pk-mobile-util { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 14px; }
.pk-mobile-util .pk-util-link { border: 1px solid var(--pk-line); }
.pk-mobile-util .pk-util-link + .pk-util-link { border-left: 1px solid var(--pk-line); border-radius: var(--pk-radius); }

/* =========================================================
   Hero slider
   ========================================================= */
.pk-hero { position: relative; overflow: hidden; background: var(--pk-black); }
.pk-hero-track { position: relative; }
.pk-slide {
    position: absolute;
    inset: 0;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.9s ease;
    display: flex;
    align-items: center;
}
.pk-slide.is-active { opacity: 1; visibility: visible; }
/* The first slide stays in the document flow to give the hero its height;
   every other slide is absolutely overlaid and revealed via opacity only. */
.pk-slide:first-child { position: relative; }
.pk-slide-inner {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: var(--pk-maxw);
    margin-inline: auto;
    padding: clamp(48px, 8vh, 90px) 24px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: clamp(24px, 4vw, 56px);
}
/* Slides without an image let the content use the full width. */
.pk-slide--no-image .pk-slide-inner { grid-template-columns: 1fr; }
.pk-slide-content { max-width: 620px; }

/* The image now shows as an actual image on the right - not a background. */
.pk-slide-figure {
    display: flex;
    align-items: center;
    justify-content: center;
}
.pk-slide-figure img {
    width: 100%;
    height: auto;
    max-height: 460px;
    object-fit: contain;
    border-radius: var(--pk-radius-lg);
    filter: drop-shadow(0 24px 40px rgba(0,0,0,0.55));
}
.pk-slide-eyebrow {
    display: inline-block;
    font-size: 0.78rem;
    letter-spacing: 4px;
    text-transform: uppercase;
    color: var(--pk-gold);
    margin-bottom: 18px;
    font-weight: 700;
}
.pk-slide-content h2 {
    font-size: clamp(2.2rem, 6vw, 4rem);
    margin-bottom: 18px;
    color: var(--pk-white);
    text-shadow: 0 2px 20px rgba(0,0,0,0.5);
}
.pk-slide-content p {
    font-size: clamp(1rem, 2vw, 1.2rem);
    color: var(--pk-silver);
    margin-bottom: 30px;
    max-width: 520px;
}
.pk-slide-actions { display: flex; flex-wrap: wrap; gap: 14px; }

.pk-hero-dots {
    position: absolute;
    bottom: 26px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 10px;
    z-index: 5;
}
.pk-hero-dots button {
    width: 12px; height: 12px;
    border-radius: 50%;
    border: 1.5px solid var(--pk-gold);
    background: transparent;
    cursor: pointer;
    padding: 0;
    transition: background var(--pk-transition), transform var(--pk-transition);
}
.pk-hero-dots button.is-active { background: var(--pk-gold); transform: scale(1.2); }

.pk-hero-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 5;
    width: 50px; height: 50px;
    border-radius: 50%;
    border: 1px solid var(--pk-line);
    background: rgba(13,13,15,0.55);
    color: var(--pk-white);
    font-size: 1.4rem;
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: background var(--pk-transition), border-color var(--pk-transition);
}
.pk-hero-arrow:hover { background: var(--pk-gold); color: var(--pk-black); border-color: var(--pk-gold); }
.pk-hero-arrow--prev { left: 20px; }
.pk-hero-arrow--next { right: 20px; }

/* =========================================================
   Sections & layout
   ========================================================= */
.pk-section { padding-block: clamp(56px, 8vw, 96px); }
.pk-section--alt { background: var(--pk-dark); }
.pk-section-head { text-align: center; max-width: 720px; margin: 0 auto 48px; }
.pk-section-head .pk-eyebrow {
    display: inline-block;
    font-size: 0.78rem;
    letter-spacing: 4px;
    text-transform: uppercase;
    color: var(--pk-gold);
    margin-bottom: 14px;
    font-weight: 700;
}
.pk-section-head p { color: var(--pk-muted); }

.pk-grid { display: grid; gap: 24px; }
.pk-grid--2 { grid-template-columns: repeat(2, 1fr); }
.pk-grid--3 { grid-template-columns: repeat(3, 1fr); }
.pk-grid--4 { grid-template-columns: repeat(4, 1fr); }

/* Category / feature cards */
.pk-card {
    position: relative;
    background: var(--pk-dark-2);
    border: 1px solid var(--pk-line);
    border-radius: var(--pk-radius-lg);
    overflow: hidden;
    transition: transform var(--pk-transition), border-color var(--pk-transition), box-shadow var(--pk-transition);
}
.pk-card:hover { transform: translateY(-6px); border-color: var(--pk-gold); box-shadow: var(--pk-shadow); }
.pk-card-media { aspect-ratio: 4 / 3; overflow: hidden; background: var(--pk-black); }
.pk-card-media img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease; }
.pk-card:hover .pk-card-media img { transform: scale(1.06); }
.pk-card-body { padding: 22px; }
.pk-card-body h3 { margin-bottom: 6px; }
.pk-card-body p { color: var(--pk-muted); font-size: 0.92rem; margin: 0; }
/* Category cards: centred title, no product count. */
.pk-card--cat .pk-card-body { text-align: center; }
.pk-card--cat .pk-card-body h3 { margin-bottom: 0; }
.pk-card-link { position: absolute; inset: 0; z-index: 3; text-indent: -9999px; }

/* Feature/USP strip */
.pk-usps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.pk-usp { text-align: center; padding: 26px 16px; }
.pk-usp-icon {
    width: 58px; height: 58px;
    margin: 0 auto 16px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 50%;
    background: rgba(212,175,55,0.1);
    color: var(--pk-gold);
    font-size: 1.5rem;
}
.pk-usp h4 { font-family: var(--pk-font-body); color: var(--pk-white); font-size: 1.02rem; margin: 0 0 6px; text-transform: uppercase; letter-spacing: 0.5px; }
.pk-usp p { color: var(--pk-muted); font-size: 0.88rem; margin: 0; }

/* CTA band */
.pk-cta-band {
    background: var(--pk-gold-gradient);
    border-radius: var(--pk-radius-lg);
    padding: clamp(36px, 6vw, 64px);
    text-align: center;
    color: #1a1408;
}
.pk-cta-band h2 { color: #1a1408; }
.pk-cta-band p { color: #3a2f11; max-width: 620px; margin: 0 auto 26px; font-weight: 500; }
.pk-cta-band .pk-btn--dark {
    background: var(--pk-black);
    color: var(--pk-gold);
}
.pk-cta-band .pk-btn--dark:hover { color: var(--pk-gold-light); transform: translateY(-2px); }

/* =========================================================
   Content (pages / posts)
   ========================================================= */
.pk-page-header {
    padding: clamp(50px, 8vw, 90px) 0 0;
    text-align: center;
    border-bottom: 1px solid var(--pk-line);
    margin-bottom: 48px;
}
.pk-page-header .pk-container { padding-bottom: clamp(30px, 5vw, 50px); }
.pk-breadcrumbs { font-size: 0.82rem; color: var(--pk-muted); margin-bottom: 14px; }
.pk-breadcrumbs a { color: var(--pk-silver-dark); }

.pk-content-area { padding-bottom: 80px; }
.pk-entry-content { max-width: 820px; margin-inline: auto; }
.pk-entry-content h2 { margin-top: 1.6em; }
.pk-entry-content h3 { margin-top: 1.4em; }
.pk-entry-content ul, .pk-entry-content ol { padding-left: 1.3em; margin-bottom: 1.2em; }
.pk-entry-content li { margin-bottom: 0.5em; }
.pk-entry-content img { border-radius: var(--pk-radius); margin-block: 1.4em; }
.pk-entry-content blockquote {
    border-left: 3px solid var(--pk-gold);
    padding: 8px 0 8px 22px;
    margin: 1.6em 0;
    color: var(--pk-silver);
    font-style: italic;
}
.pk-entry-content a { text-decoration: underline; text-underline-offset: 3px; }

/* Posts grid */
.pk-post-card { display: flex; flex-direction: column; }
.pk-post-card .pk-card-body { flex: 1; display: flex; flex-direction: column; }
.pk-post-meta { font-size: 0.78rem; color: var(--pk-silver-dark); text-transform: uppercase; letter-spacing: 1px; margin-bottom: 10px; }
.pk-read-more { margin-top: auto; padding-top: 14px; font-weight: 700; text-transform: uppercase; font-size: 0.82rem; letter-spacing: 1px; }

/* Pagination */
.pk-pagination { display: flex; justify-content: center; gap: 8px; margin-top: 48px; flex-wrap: wrap; }
.pk-pagination .page-numbers {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 44px; height: 44px; padding: 0 12px;
    border: 1px solid var(--pk-line); border-radius: var(--pk-radius);
    color: var(--pk-text);
}
.pk-pagination .page-numbers.current { background: var(--pk-gold); color: var(--pk-black); border-color: var(--pk-gold); }
.pk-pagination a.page-numbers:hover { border-color: var(--pk-gold); color: var(--pk-gold); }

/* =========================================================
   Footer
   ========================================================= */
.pk-site-footer { background: var(--pk-dark); border-top: 1px solid var(--pk-line); margin-top: 60px; }

/* Four even, evenly-spaced footer columns driven by widgets. */
.pk-footer-top {
    padding-block: 64px;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 48px;
    align-items: start;
}
.pk-footer-col { min-width: 0; }
.pk-footer-empty { display: block; text-align: center; color: var(--pk-muted); }
.pk-footer-empty a { color: var(--pk-gold); }

/* Footer widget styling (works with any core or plugin widget). */
.pk-site-footer .pk-widget { margin-bottom: 26px; }
.pk-site-footer .pk-widget:last-child { margin-bottom: 0; }
.pk-site-footer .pk-widget-title,
.pk-site-footer .widget-title,
.pk-site-footer .widgettitle {
    font-family: var(--pk-font-body);
    text-transform: uppercase;
    letter-spacing: 1px;
    font-size: 0.95rem;
    color: var(--pk-white);
    margin: 0 0 18px;
}
.pk-site-footer .pk-widget ul { list-style: none; margin: 0; padding: 0; }
.pk-site-footer .pk-widget li { margin-bottom: 10px; line-height: 1.5; }
.pk-site-footer .pk-widget a { color: var(--pk-muted); font-size: 0.92rem; }
.pk-site-footer .pk-widget a:hover { color: var(--pk-gold); }
.pk-site-footer .pk-widget p { color: var(--pk-muted); font-size: 0.92rem; }
.pk-site-footer .pk-widget img { border-radius: var(--pk-radius); }
.pk-site-footer .pk-widget select,
.pk-site-footer .pk-widget input[type="email"],
.pk-site-footer .pk-widget input[type="text"],
.pk-site-footer .pk-widget input[type="search"] {
    width: 100%; margin-bottom: 12px;
    background: var(--pk-black); border: 1px solid var(--pk-line);
    border-radius: var(--pk-radius); color: var(--pk-text);
}

.pk-footer-bottom { border-top: 1px solid var(--pk-line); padding-block: 22px; display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; }
.pk-footer-bottom p { margin: 0; color: var(--pk-silver-dark); font-size: 0.85rem; }
.pk-payment-icons { display: flex; gap: 10px; color: var(--pk-silver-dark); font-size: 1.6rem; }

/* =========================================================
   Widgets / forms
   ========================================================= */
input[type="text"], input[type="email"], input[type="search"], input[type="tel"], input[type="password"], input[type="number"], textarea, select {
    background: var(--pk-dark-2);
    border: 1px solid var(--pk-line);
    border-radius: var(--pk-radius);
    color: var(--pk-text);
    padding: 12px 14px;
    font-family: var(--pk-font-body);
    width: 100%;
}
input:focus, textarea:focus, select:focus { outline: none; border-color: var(--pk-gold); }

/* =========================================================
   Responsive
   ========================================================= */
@media (max-width: 980px) {
    .pk-footer-top { grid-template-columns: 1fr 1fr; }
    .pk-grid--4 { grid-template-columns: repeat(2, 1fr); }
    .pk-usps { grid-template-columns: repeat(2, 1fr); }
}
/* Collapse the split desktop nav into a hamburger on narrower screens. */
@media (max-width: 1080px) {
    .pk-header-grid { grid-template-columns: auto 1fr auto; }
    .pk-nav--left, .pk-nav--right { display: none; }
    .pk-branding { justify-content: flex-start; }
    .pk-menu-toggle { display: inline-flex; align-items: center; justify-content: center; }
}
@media (max-width: 720px) {
    .pk-util-grid { grid-template-columns: 1fr; gap: 6px; justify-items: stretch; }
    .pk-marquee { order: 2; }
    .pk-util-links { order: 1; justify-content: flex-end; flex-wrap: wrap; }
    .pk-util-link { padding: 6px 9px; }
}
/* Stack the hero (content above image) on tablet and below. */
@media (max-width: 860px) {
    .pk-slide-inner { grid-template-columns: 1fr; gap: 24px; text-align: center; }
    .pk-slide-content { max-width: 620px; margin-inline: auto; }
    .pk-slide-content p { margin-inline: auto; }
    .pk-slide-actions { justify-content: center; }
    .pk-slide-figure { order: -1; }
    .pk-slide-figure img { max-height: 300px; }
}
@media (max-width: 680px) {
    .pk-grid--2, .pk-grid--3, .pk-grid--4 { grid-template-columns: 1fr; }
    .pk-usps { grid-template-columns: 1fr; }
    .pk-footer-top { grid-template-columns: 1fr; }
    .pk-hero-arrow { display: none; }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    * { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; }
}