/*
Theme Name: Twist3D Picture
Theme URI: https://twist3dpicture.co.uk
Author: Twist3D Picture
Description: Custom theme for Twist3D Picture, converted from the approved v3 design. Editable Shop Products, Office Shelf and site settings in wp-admin; enquiry-based shop (no checkout), quote forms and cookie banner are built in.
Version: 1.2.0
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: twist3d
*/

*{box-sizing:border-box;margin:0}
:root{--or:#E94E1B;--orb:#C93D0B;--am:#F39200;--bl:#007fba;--bg:#fff;--fg:#232323;--mut:#666;--soft:#f3f3f3;--line:#e1e1e1;box-sizing:border-box;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
@media(prefers-color-scheme:dark){:root:not([data-theme=light]){--bg:#171717;--fg:#f0f0f0;--mut:#a8a8a8;--soft:#222;--line:#363636;--bl:#4cc2f5}}
:root[data-theme=dark]{--bg:#171717;--fg:#f0f0f0;--mut:#a8a8a8;--soft:#222;--line:#363636;--bl:#4cc2f5}
html{scroll-padding-top:calc(env(safe-area-inset-top,0px) + 84px);scroll-behavior:smooth}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important}}
body{background:var(--bg);color:var(--fg);font:17px/1.55 Barlow,system-ui,sans-serif}
img{display:block;max-width:100%}a{color:inherit;text-decoration:none}
:focus-visible{outline:3px solid var(--am);outline-offset:2px}
h1,h2,h3{font-family:Kanit,Barlow,sans-serif;font-weight:600;line-height:1.1;letter-spacing:-.01em}
h1,h2{font-style:italic}h1{font-size:clamp(2.5rem,6vw,4.7rem)}h2{font-size:clamp(1.9rem,3.6vw,2.8rem)}h3{font-size:1.25rem}
p+p{margin-top:14px}.w{max-width:1240px;margin:auto;padding:0 24px}
section{padding:84px 0}.soft{background:var(--soft)}.dk{background:#232323;color:#f0f0f0}.or{background:var(--orb);color:#fff}
.mut{color:var(--mut)}.dk .mut{color:#b5b5b5}.lead{font-size:1.25rem;max-width:62ch}
.btn{display:inline-block;padding:13px 26px;background:var(--orb);border:2px solid var(--orb);color:#fff;font:600 16px Barlow,sans-serif;cursor:pointer;transition:background .15s}
.btn:hover{background:#a53208;border-color:#a53208}.btn.o{background:transparent;border-color:currentColor;color:inherit}.btn.o:hover{background:rgba(255,255,255,.16)}
.or .btn.o:hover{background:rgba(255,255,255,.2)}.row{display:flex;gap:12px;flex-wrap:wrap;margin-top:28px}
.lnk{font-weight:600;color:var(--orb);cursor:pointer}.dk .lnk{color:var(--am)}.lnk:after{content:" \2192"}
.hd1{background:#232323;color:#eee;text-align:center;font-size:13.5px;padding:7px 12px}
header{position:sticky;top:env(safe-area-inset-top,0px);z-index:50;background:var(--bg);border-bottom:1px solid var(--line)}
.hd{display:flex;align-items:center;gap:26px;height:74px}.lg{display:flex;align-items:center;gap:10px}.lg .r{height:40px;width:auto}.lg .wm{height:21px;width:auto}
nav{display:flex;gap:28px;margin-left:auto;align-items:center}nav>a,.m>a{display:block;padding:27px 0;font-weight:500;cursor:pointer}
nav [data-on]{box-shadow:inset 0 -3px var(--or)}.ic{display:flex;gap:16px;align-items:center}.ic span{cursor:pointer;font-size:14px;font-weight:500}
.mega{display:none;position:absolute;left:0;right:0;top:100%;background:var(--bg);border-bottom:1px solid var(--line);padding:26px 0 30px;box-shadow:0 20px 30px rgba(0,0,0,.1)}
.m:hover .mega,.m:focus-within .mega{display:block}.mg{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.mg a{display:block;cursor:pointer}.mg img,.mg .ph0{aspect-ratio:4/3;width:100%;object-fit:cover;margin-bottom:10px}.mg b{font-family:Kanit;font-weight:500}.mg small{display:block;color:var(--mut);line-height:1.35}
.bg{display:none;background:none;border:2px solid var(--line);color:inherit;padding:6px 12px;font:600 14px Barlow;margin-left:auto;cursor:pointer}

/* Homepage hero: full video background with text on top */
.hero{
    display:flex;
    align-items:center;
    position:relative;
    min-height:80vh;
    padding:0;
    overflow:hidden;
    background:#000;
    color:#fff;
}
.hero-bg{
    display:block;
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    object-fit:cover;
    object-position:center center;
    z-index:0;
    background:#000;
}
.hero .t{
    position:relative;
    z-index:2;
    width:100%;
    max-width:1240px;
    margin:0 auto;
    padding:90px 24px;
}
.hero h1{max-width:13ch}
.hero .t p{margin-top:22px;max-width:46ch;font-size:1.2rem;color:#e4e4e4}

/* The square mobile/tablet video is hidden on desktop. */
.hero-video-mobile{display:none}

.page{padding:96px 0 72px}.page h1{max-width:16ch}.page .lead{margin-top:20px}
.two{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center}.two.rev>:first-child{order:2}
.tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}.tile{position:relative;aspect-ratio:4/5;overflow:hidden;color:#fff;display:block;cursor:pointer;background:#333}
.tile img,.tile .ph0{width:100%;height:100%;object-fit:cover;transition:transform .5s}.tile:hover img{transform:scale(1.04)}
.tile div.c{position:absolute;inset:auto 0 0 0;padding:110px 24px 24px;background:linear-gradient(transparent,rgba(0,0,0,.86) 70%)}.tile .c p{margin:6px 0 12px;font-size:16px;color:#eee}.tile .lnk{color:var(--am)}
.t4{grid-template-columns:repeat(4,1fr)}.t4 .tile{aspect-ratio:1}.fl{display:inline-flex;align-items:center;gap:10px;background:#fff;padding:10px 14px}.fl .r2{height:34px}.fl .w2{height:19px}#lb .th{display:flex;gap:8px;margin:10px 0}#lb .th img{width:64px;height:64px;object-fit:cover;cursor:pointer}
.rvg{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}.rvc{background:var(--bg);border:1px solid var(--line);border-top:3px solid var(--or);padding:26px}.rvc p{font-size:1.08rem}.rvc figcaption{margin-top:14px;font-weight:600}.doc{max-width:820px}.doc h3{margin:34px 0 10px}.doc a{text-decoration:underline}.doc h1{max-width:none}.doc .tb td,.doc .tb th{vertical-align:top}
#ck{position:fixed;inset:0;background:rgba(0,0,0,.6);display:none;align-items:end;justify-content:center;z-index:120;padding:16px 16px calc(16px + env(safe-area-inset-bottom,0px))}#ck.on{display:flex}.ckb{background:var(--bg);color:var(--fg);max-width:600px;width:100%;padding:26px;border-top:4px solid var(--or)}.ckb h3{margin-bottom:8px}.ckb .row{margin-top:16px}
.sh{display:flex;justify-content:space-between;align-items:end;gap:20px;margin-bottom:34px;flex-wrap:wrap}
.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:28px 22px}.g3{grid-template-columns:repeat(3,1fr)}.g5{grid-template-columns:repeat(5,1fr)}
.card{display:block;cursor:pointer}.card .im{aspect-ratio:4/5;background:var(--soft);overflow:hidden;position:relative}.card .im img,.card .im .ph0{width:100%;height:100%;object-fit:cover;transition:transform .5s}.card:hover .im img{transform:scale(1.04)}
.card h3{font-size:1.08rem;margin-top:13px}.card .pr{color:var(--orb);font-weight:600}.card .ct{font-size:14px;color:var(--mut)}
.ph0{display:grid;place-content:center;text-align:center;background:repeating-linear-gradient(135deg,var(--soft) 0 12px,var(--line) 12px 13px);color:var(--mut);font-weight:600;font-size:14px;min-height:100%}.ph0 small{font-weight:400;font-size:12.5px}
.dk .ph0{background:repeating-linear-gradient(135deg,#2c2c2c 0 12px,#383838 12px 13px);color:#aaa}
.mos{display:grid;grid-template-columns:1fr 1fr;gap:12px}.mos>*{aspect-ratio:1;overflow:hidden}.mos>:first-child{grid-row:span 2;aspect-ratio:auto}.mos img{width:100%;height:100%;object-fit:cover}
.or{position:relative;overflow:hidden}.or .rb{position:absolute;right:4%;top:-18%;height:150%;opacity:.16;pointer-events:none}.or .w{position:relative}.or h2{max-width:22ch}
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;margin-top:36px}.steps div{border-top:3px solid var(--or);padding-top:14px}.steps b{font:600 2.3rem Kanit;color:var(--or);display:block;line-height:1}
.steps h3{margin:8px 0 6px}.cols4{display:grid;grid-template-columns:repeat(4,1fr);gap:28px}.cols4>div{border-left:3px solid var(--or);padding-left:18px}.cols4 h3{margin-bottom:8px}
.tl>div{display:grid;grid-template-columns:200px 1fr;gap:36px;padding:38px 0;border-top:1px solid var(--line)}.tl b{font:600 3.6rem/1 Kanit;font-style:italic;color:var(--or)}.tl h3{margin-bottom:8px}
.q{font:italic 600 clamp(1.7rem,3.4vw,2.7rem)/1.2 Kanit;max-width:26ch}
ul.ck{list-style:none;padding:0;margin-top:14px}ul.ck li{padding:7px 0 7px 26px;position:relative}ul.ck li:before{content:"";position:absolute;left:0;top:15px;width:12px;height:12px;background:var(--or);clip-path:polygon(0 0,100% 50%,0 100%)}
.tb{width:100%;border-collapse:collapse;margin-top:18px}.tb th,.tb td{text-align:left;padding:13px 14px;border-bottom:1px solid var(--line)}.tb th{font:500 15px Kanit;background:var(--soft)}
.pic{aspect-ratio:4/5;overflow:hidden;background:var(--soft)}.pic img,.pic .ph0{width:100%;height:100%;object-fit:cover}.pic.l{aspect-ratio:4/3}
.chips{display:flex;gap:10px;flex-wrap:wrap;margin:0 0 30px}.chip{padding:8px 18px;border:2px solid var(--line);background:none;color:inherit;font:500 15px Barlow;cursor:pointer}.chip[aria-pressed=true]{background:var(--fg);color:var(--bg);border-color:var(--fg)}
.bc{font-size:14px;color:var(--mut);margin-bottom:26px}.bc a{cursor:pointer;text-decoration:underline}
.pd{display:grid;grid-template-columns:1.1fr .9fr;gap:60px}.pd .th{display:flex;gap:10px;margin-top:10px}.pd .th img{width:84px;height:84px;object-fit:cover;cursor:pointer;border:2px solid transparent}.pd .th img[data-on]{border-color:var(--or)}
.pd .big{aspect-ratio:1;background:var(--soft)}.pd .big img{width:100%;height:100%;object-fit:contain}.price{font:600 1.7rem Kanit;color:var(--orb);margin:14px 0}
label{display:block;font-weight:500;font-size:15px;margin:16px 0 6px}input,select,textarea{width:100%;padding:12px 13px;border:2px solid var(--line);background:var(--bg);color:var(--fg);font:inherit;border-radius:0}
.fg{display:grid;grid-template-columns:1fr 1fr;gap:0 22px}.fg .f{grid-column:1/-1}.note{font-size:14px;color:var(--mut);margin-top:12px}.opt{display:flex;gap:10px;align-items:center;margin:10px 0}.opt input{width:auto}
.shelf{display:grid;grid-template-columns:repeat(3,1fr);gap:34px 26px}.shelf figure{cursor:pointer}.shelf .pic{aspect-ratio:1}.shelf h3{margin-top:14px}.shelf small{display:block;color:var(--mut);margin-top:8px;font-size:14px}
.tag{display:inline-block;font-size:13px;font-weight:600;border:1.5px solid var(--or);color:var(--orb);padding:2px 9px;margin-top:10px}
details{border-top:1px solid var(--line);padding:18px 0}details:last-child{border-bottom:1px solid var(--line)}summary{font:500 1.15rem Kanit;cursor:pointer;list-style:none;display:flex;justify-content:space-between}summary:after{content:"+";color:var(--or);font-size:1.5rem;line-height:1}details[open] summary:after{content:"\2212"}details p{margin-top:12px;max-width:70ch}
footer{background:#232323;color:#cfcfcf;padding:64px 0 28px;font-size:15px}.fgd{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:40px}footer h4{font:500 1rem Kanit;color:#fff;margin-bottom:12px}footer a{display:block;padding:3px 0;cursor:pointer}footer a:hover{color:#fff}
.ft{font:italic 600 1.6rem Kanit;color:var(--or)}.ft i{color:var(--am)}.ft em{color:#9a9a9a}.fb{border-top:1px solid #3a3a3a;margin-top:44px;padding-top:20px;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:14px;color:#9d9d9d}
#lb{position:fixed;inset:0;background:rgba(0,0,0,.88);display:none;place-items:center;z-index:99;padding:24px}#lb.on{display:grid}#lb div{max-width:760px;color:#fff}#lb img{max-height:72vh;margin:auto;object-fit:contain}#lb p{margin-top:12px}
#toast{position:fixed;left:50%;bottom:calc(24px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);background:#232323;color:#fff;padding:12px 22px;border-left:4px solid var(--or);z-index:98;display:none}

@media(max-width:960px){
.t4 .c p{display:none}.t4 .c{padding:60px 14px 14px}.t4 h3{font-size:1.05rem}.t4,.t4.tiles{grid-template-columns:1fr 1fr}.t4 .tile{aspect-ratio:1}nav,.ic{display:none}.bg{display:block}header.open nav{display:flex;flex-direction:column;align-items:stretch;gap:0;position:absolute;left:0;right:0;top:100%;background:var(--bg);padding:8px 24px 20px;border-bottom:1px solid var(--line)}header.open nav>a,header.open .m>a{padding:14px 0;border-bottom:1px solid var(--line)}.mega{display:none!important}

/* Mobile and tablet: square video sits above the homepage text. */
.hero{
    display:block;
    position:relative;
    min-height:0;
    padding:0;
    overflow:hidden;
    background:var(--bg);
    color:var(--fg);
}

.hero-video-desktop{
    display:none !important;
}

.hero-video-mobile{
    display:block !important;
    position:relative;
    width:100%;
    height:auto;
    aspect-ratio:1 / 1;
    object-fit:contain;
    object-position:center center;
    background:#000;
}

.hero .t{
    position:relative;
    z-index:2;
    width:100%;
    padding:40px 24px 55px;
}
.hero .t p{color:var(--fg)}

.two,.pd,.tiles:not(.t4),.steps,.cols4,.shelf,.fgd,.rvg{grid-template-columns:1fr}.two.rev>:first-child{order:0}.two{gap:34px}.grid,.g3,.g5{grid-template-columns:repeat(2,1fr)}.tl>div{grid-template-columns:1fr;gap:10px}.fg{grid-template-columns:1fr}section{padding:60px 0}.tile{aspect-ratio:4/3}.shelf{grid-template-columns:1fr 1fr;gap:26px 14px}.cols4{gap:24px}.steps{gap:20px}
}

/* ---- WordPress additions ---- */
.admin-bar header{top:calc(32px + env(safe-area-inset-top,0px))}
@media(max-width:782px){.admin-bar header{top:calc(46px + env(safe-area-inset-top,0px))}}
.t3d-hp{position:absolute!important;left:-9999px!important;width:1px;height:1px;overflow:hidden}
.t3d-err{background:#fdeceb;border-left:4px solid var(--or);color:#232323;padding:12px 16px;margin-bottom:18px}
.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;width:1px;word-wrap:normal!important}
.doc .wp-block-image img,.doc img{height:auto}

/* ---- v1.2 additions ---- */
.soc{display:flex;gap:14px;margin-top:10px}
.soc a{display:inline-flex;padding:0;color:#cfcfcf}
.soc a:hover{color:#fff}
.soc svg{width:24px;height:24px;fill:currentColor}
.card .im video{width:100%;height:100%;object-fit:cover;display:block;background:#000}
#chips{scroll-margin-top:110px}
#lb .th img{opacity:.55;margin:0}
#lb .th img[data-on]{opacity:1;outline:2px solid var(--or)}
#lb #lbi{cursor:pointer}
/* Page heading slide-in animation */
@keyframes t3dHeadingSlideIn {
    from {
        opacity: 0;
        transform: translateX(-35px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

main h1 {
    animation: t3dHeadingSlideIn 0.9s ease-out both;
}

@media (prefers-reduced-motion: reduce) {
    main h1 {
        animation: none;
    }
}