/*
Theme Name: Durdana Syed
Theme URI: https://durdanasyedart.com
Author: Durdana Syed Art
Description: Ink & Seal — a bespoke, artistic gallery theme for Durdana Syed. Bone paper, sumi ink, and a single cinnabar seal-red accent.
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 8.0
Textdomain: durdana
*/

:root{
  --bg:#EFEBE3; --surface:#FBFAF6; --ink:#1B1A17; --muted:#6B655C;
  --line:#DAD4C8; --accent:#B23A2E; --accent-ink:#8f2c22; --gold:#b8923f;
  --font-display:'Cormorant Garamond',Georgia,serif;
  --font-body:'Hanken Grotesk',system-ui,-apple-system,sans-serif;
  --wrap:1240px; --gutter:clamp(20px,5vw,64px);
  --sp-xl:clamp(64px,9vw,120px);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);background-image:radial-gradient(rgba(27,26,23,.035) 1px,transparent 1px);background-size:3px 3px;color:var(--ink);font-family:var(--font-body);font-weight:400;font-size:17px;line-height:1.65;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4{font-family:var(--font-display);font-weight:600;line-height:1.05;margin:0;letter-spacing:.002em}
p{margin:0 0 1em}
:where(h1,h2,h3,h4,p,ul,figure,blockquote){margin:0}
.wrap{max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gutter)}
.eyebrow{font-family:var(--font-body);font-size:.8rem;letter-spacing:.22em;text-transform:uppercase;color:var(--gold);font-weight:700}
.section{padding-block:var(--sp-xl)}
.rule{height:1px;background:var(--line);border:0;margin:0}
.accent{color:var(--accent)}

/* Buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5em;font-family:var(--font-body);font-size:.8rem;letter-spacing:.16em;text-transform:uppercase;font-weight:600;padding:.95em 1.9em;border:1px solid var(--ink);background:transparent;color:var(--ink);cursor:pointer;transition:background .25s,color .25s,border-color .25s;border-radius:0}
.btn--solid{background:var(--ink);color:var(--bg)}
.btn--solid:hover{background:var(--accent);border-color:var(--accent)}
.btn--ghost:hover{background:var(--ink);color:var(--bg)}
.btn--block{width:100%}

/* Header */
.site-header{position:sticky;top:0;z-index:60;background:color-mix(in srgb,var(--bg) 88%,transparent);backdrop-filter:blur(8px);border-bottom:1px solid transparent;transition:border-color .3s,background .3s}
.site-header.is-stuck{border-bottom-color:var(--line);background:color-mix(in srgb,var(--bg) 0%,transparent)}
.nav{display:flex;align-items:center;justify-content:space-between;gap:2rem;height:76px}
.brand{font-family:var(--font-display);font-size:1.5rem;font-weight:600;letter-spacing:.01em;line-height:1;white-space:nowrap}
.brand span{color:var(--accent)}
.nav-links{display:flex;align-items:center;gap:clamp(1rem,2.4vw,2.4rem);list-style:none;margin:0;padding:0}
.nav-links a{font-size:.82rem;letter-spacing:.13em;text-transform:uppercase;font-weight:500;color:var(--ink);position:relative;padding-block:.4em}
.nav-links a::after{content:'';position:absolute;left:0;right:100%;bottom:0;height:1px;background:var(--accent);transition:right .3s ease}
.nav-links a:hover::after,.nav-links a.current::after{right:0}
.nav-cart{display:inline-flex;align-items:center;gap:.4em;font-size:.82rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.nav-toggle{display:none;background:none;border:0;padding:8px;cursor:pointer}
.nav-toggle span{display:block;width:24px;height:1.5px;background:var(--ink);margin:5px 0;transition:.3s}

/* Hero */
.hero{position:relative;min-height:calc(100svh - 76px);display:flex;align-items:center;overflow:hidden}
.hero-slides{position:absolute;inset:0;z-index:0}
.hero-slide{position:absolute;inset:0;background-size:cover;background-position:center;opacity:0;transform:scale(1.06);transition:opacity 1.6s ease,transform 7s ease}

.hero-slide video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.hero-slide.on{opacity:1;transform:scale(1)}
.hero::after{content:'';position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(20,19,17,.30),rgba(20,19,17,.52))}
.hero-inner{position:relative;z-index:2;width:100%;text-align:center;color:#F6F2EA;padding-block:clamp(40px,8vh,90px)}
.hero-eyebrow{color:var(--gold);letter-spacing:.28em}
.hero h1{font-size:clamp(2.8rem,6.4vw,5.15rem);font-weight:500;margin:.28em auto .1em;max-width:26ch;color:#fdfbf6}
.hero-sub{max-width:52ch;margin:1.1em auto 2.1em;font-size:clamp(1rem,1.4vw,1.18rem);line-height:1.6;color:#efe9dd}
.hero-toggle{display:inline-flex;border:1px solid rgba(246,242,234,.5);background:rgba(20,19,17,.18)}
.hero-toggle a{padding:.9em 2.2em;font-size:.78rem;letter-spacing:.18em;text-transform:uppercase;font-weight:600;color:#f6f2ea;transition:background .25s,color .25s}
.hero-toggle a.active,.hero-toggle a:hover{background:#f6f2ea;color:var(--ink)}
.hero-dots{position:absolute;bottom:26px;left:50%;transform:translateX(-50%);z-index:3;display:flex;gap:10px}
.hero-dots button{width:8px;height:8px;border-radius:50%;border:1px solid rgba(246,242,234,.8);background:transparent;padding:0;cursor:pointer;transition:background .3s}
.hero-dots button.on{background:#f6f2ea}

/* Section head */
.sec-head{display:flex;align-items:flex-end;justify-content:space-between;gap:2rem;margin-bottom:clamp(28px,4vw,52px)}
.sec-head h2{font-size:clamp(2.15rem,4.7vw,3.6rem);font-weight:500;max-width:18ch}
.sec-head .eyebrow{display:block;margin-bottom:14px}
.sec-head .lead{max-width:40ch;color:var(--muted);font-size:1.02rem}

/* Originals filter */
.filter{display:flex;gap:.4rem;margin:0 0 clamp(24px,3vw,40px)}
.filter button{border:1px solid var(--line);background:transparent;color:var(--muted);font-family:var(--font-body);font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;font-weight:600;padding:.7em 1.3em;cursor:pointer;transition:.25s}
.filter button.on{background:var(--ink);color:var(--bg);border-color:var(--ink)}

/* Gallery wall (masonry) */
.wall{columns:3;column-gap:clamp(18px,2.4vw,34px)}
.wall .piece{break-inside:avoid;margin-bottom:clamp(18px,2.4vw,34px)}
.piece{position:relative;display:block}
.piece-media{position:relative;overflow:hidden;background:transparent}
.piece-media img{width:100%;transition:transform .9s cubic-bezier(.2,.7,.2,1),filter .5s}
.piece:hover .piece-media img{transform:scale(1.04)}
.piece-ph{aspect-ratio:4/5;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;background:linear-gradient(150deg,#e7e1d6,#efece5 60%,#e4ddd0);color:var(--muted);text-align:center;padding:24px}
.piece-ph .seal{width:46px;height:46px;border:1.5px solid var(--muted);border-radius:50%;display:grid;place-items:center;font-family:var(--font-display);font-size:1.3rem;color:var(--muted);opacity:.7}
.piece-ph small{font-size:.66rem;letter-spacing:.18em;text-transform:uppercase}
.piece-cap{display:flex;justify-content:space-between;align-items:baseline;gap:14px;padding:12px 2px 0}
.piece-cap .t{font-family:var(--font-display);font-size:1.16rem;font-weight:600;line-height:1.15}
.piece-cap .pr{font-size:.86rem;color:var(--muted);white-space:nowrap;letter-spacing:.02em}
.piece-cap .pr.is-sale{white-space:normal}
.piece-cap .pr del{opacity:.6;margin-right:.4em;text-decoration:line-through}
.piece-cap .pr ins{text-decoration:none;color:var(--accent);font-weight:600;background:none}
.piece-cap .pr.sold{color:var(--accent);text-transform:uppercase;letter-spacing:.14em;font-size:.72rem;font-weight:600}
.piece-media.is-sold img{filter:saturate(.82) brightness(.97)}
.sold-seal{position:absolute;top:14px;right:14px;display:inline-flex;align-items:center;justify-content:center;font-family:var(--font-body);font-size:.72rem;font-weight:600;letter-spacing:normal;text-transform:none;line-height:1;padding:.3em .85em;border-radius:9999px;color:var(--ink);background:var(--surface);box-shadow:0 1px 2px 0 rgba(0,0,0,.05)}

/* About */
.about{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(30px,6vw,80px);align-items:center}
.about-media{position:relative}
.about-media img{width:100%;object-fit:cover;aspect-ratio:4/5}
.about-media .ph{aspect-ratio:4/5;background:linear-gradient(150deg,#e7e1d6,#efece5);display:grid;place-items:center;color:var(--muted);font-family:var(--font-display);font-size:1.1rem}
.about-body h2{font-size:clamp(2rem,4vw,3rem);font-weight:500;margin-bottom:.5em}
.about-body p{color:#2a2824;max-width:46ch;font-size:1.06rem}
.about-body .sig{font-family:var(--font-display);font-size:1.5rem;color:var(--ink);margin-top:.6em}

/* Reviews */
.reviews{background:var(--ink);color:#efe9dd}
.reviews .eyebrow{color:var(--gold)}
.rev-track{position:relative;min-height:220px}
.rev{position:absolute;inset:0;opacity:0;visibility:hidden;transition:opacity .7s ease;display:flex;flex-direction:column;align-items:center;text-align:center;gap:22px}
.rev.on{opacity:1;visibility:visible;position:relative}
.rev-quote{font-family:var(--font-display);font-size:clamp(1.5rem,3.2vw,2.35rem);line-height:1.28;font-weight:500;max-width:36ch;color:#f6f2ea}
.rev-who{display:flex;align-items:center;gap:14px;color:#cfc7b8}
.rev-who img{width:54px;height:54px;border-radius:50%;object-fit:cover;filter:grayscale(1) contrast(1.02)}
.rev-who .n{font-weight:600;letter-spacing:.04em;color:#efe9dd;font-size:.95rem}
.rev-who .c{font-size:.8rem;color:#b0a897}
.rev-dots{display:flex;justify-content:center;gap:10px;margin-top:34px}
.rev-dots button{width:8px;height:8px;border-radius:50%;border:1px solid rgba(246,242,234,.5);background:transparent;padding:0;cursor:pointer}
.rev-dots button.on{background:var(--accent);border-color:var(--accent)}

/* Forms */
.form-wrap{max-width:760px}
.f-note{background:var(--surface);border-left:2px solid var(--accent);padding:18px 22px;color:#3a352e;font-size:.98rem;margin:8px 0 34px}
.f-grid{display:grid;grid-template-columns:1fr 1fr;gap:22px 26px}
.field{display:flex;flex-direction:column;gap:8px}
.field.full{grid-column:1/-1}
.field label{font-size:.74rem;letter-spacing:.13em;text-transform:uppercase;font-weight:600;color:var(--muted)}
.field label .req{color:var(--accent);margin-left:2px}
.field input,.field select,.field textarea{font-family:var(--font-body);font-size:1rem;color:var(--ink);background:var(--surface);border:1px solid var(--line);border-radius:0;padding:.8em .9em;width:100%;transition:border-color .2s,box-shadow .2s}
.field textarea{min-height:130px;resize:vertical}
.field-checkbox{display:block}
.field-checkbox .dsa-optin{width:100%;margin:0;box-sizing:border-box}
.field-checkbox input[type=checkbox]{width:16px;height:16px;padding:0;flex:0 0 16px}
.field input:focus,.field select:focus,.field textarea:focus{outline:0;border-color:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 16%,transparent)}
.field select{appearance:none;background-image:url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3e%3cpath d='M1 1l5 5 5-5' stroke='%236B655C' stroke-width='1.4' fill='none'/%3e%3c/svg%3e");background-repeat:no-repeat;background-position:right 1em center;padding-right:2.4em}
.form-note-hp{position:absolute;left:-9999px}
.f-msg{padding:16px 20px;margin-bottom:24px;font-size:.96rem;border:1px solid}
.f-msg.ok{border-color:var(--accent);color:var(--accent-ink);background:color-mix(in srgb,var(--accent) 7%,var(--surface))}
.f-msg.err{border-color:#a33;color:#a33;background:#fbf1f0}
.dsa-optin{display:flex;align-items:flex-start;gap:.7em;margin:8px 0 26px;padding:14px 18px;background:var(--surface);border-left:2px solid var(--accent);font-size:.92rem;line-height:1.5;color:#3a352e;cursor:pointer}
.dsa-optin input[type=checkbox]{appearance:none;-webkit-appearance:none;width:17px;height:17px;flex-shrink:0;margin-top:.2em;border:1px solid var(--line);background:var(--bg);border-radius:2px;cursor:pointer;position:relative;transition:background .2s,border-color .2s}
.dsa-optin input[type=checkbox]:checked{background:var(--accent);border-color:var(--accent)}
.dsa-optin input[type=checkbox]:checked::after{content:'';position:absolute;left:5px;top:1px;width:4px;height:9px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg)}
.dsa-optin input[type=checkbox]:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

/* Page intro */
.page-hero{padding-block:clamp(60px,9vw,120px) clamp(30px,4vw,50px)}
.page-hero .eyebrow{margin-bottom:14px;display:block}
.page-hero h1{font-size:clamp(2.8rem,6.4vw,4.95rem);font-weight:500;max-width:16ch}
.page-hero .lead{max-width:52ch;color:var(--muted);font-size:1.1rem;margin-top:18px}

/* Footer */
.site-footer{background:var(--ink);color:#cfc7b8;padding-block:clamp(48px,7vw,80px)}
.foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:40px}
.site-footer .brand{color:#f6f2ea;font-size:1.7rem;margin-bottom:.4em}
.site-footer a{color:#cfc7b8;transition:color .2s}
.site-footer a:hover{color:#fff}
.foot-col h4{font-family:var(--font-body);font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;color:#8f887a;margin-bottom:16px;font-weight:600}
.foot-col ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px;font-size:.94rem}
.foot-bar{border-top:1px solid #33302b;margin-top:44px;padding-top:22px;display:flex;justify-content:space-between;gap:16px;font-size:.8rem;color:#8f887a;flex-wrap:wrap}

/* Woo touch-ups */
.woocommerce-message,.woocommerce-info,.woocommerce-error{border-top-color:var(--accent)!important}
.single-product div.product .price,.woocommerce ul.products li.product .price{color:var(--ink)!important;font-family:var(--font-display)!important}
.woocommerce #respond input#submit,.woocommerce a.button,.woocommerce button.button,.woocommerce input.button{background:var(--ink)!important;color:var(--bg)!important;border-radius:0!important;letter-spacing:.12em;text-transform:uppercase;font-size:.8rem}
.woocommerce #respond input#submit:hover,.woocommerce a.button:hover,.woocommerce button.button:hover{background:var(--accent)!important}

/* Reveal */
.js .reveal{opacity:0;transform:translateY(22px)}
.js .reveal.in{opacity:1;transform:none;transition:opacity .8s ease,transform .8s cubic-bezier(.2,.7,.2,1)}

@media(max-width:900px){
  .wall{columns:2}
  .about{grid-template-columns:1fr}
  .about-media{order:-1;max-width:440px}
  .foot-grid{grid-template-columns:1fr 1fr}
  .sec-head{flex-direction:column;align-items:flex-start;gap:12px}
}
@media(max-width:680px){
  .nav-links,.nav-cart{position:fixed;inset:76px 0 auto 0;background:var(--bg);flex-direction:column;align-items:flex-start;gap:0;padding:8px var(--gutter) 24px;border-bottom:1px solid var(--line);transform:translateY(-140%);transition:transform .35s ease;box-shadow:0 20px 30px -20px rgba(20,19,17,.3)}
  .nav-links{display:flex}
  .site-header.open .nav-links{transform:translateY(0)}
  .nav-links li{width:100%;border-bottom:1px solid var(--line)}
  .nav-links a{display:block;padding:16px 0;font-size:1rem}
  .nav-toggle{display:block}
  .wall{columns:1}
  .f-grid{grid-template-columns:1fr}
  .hero-toggle{flex-direction:row}
  .foot-grid{grid-template-columns:1fr}
}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{animation-duration:.001ms!important;transition-duration:.001ms!important}
  .hero-slide{transform:none!important}
}
 .custom-logo,.brand img{max-height:46px;width:auto} .dsa-trust{font-size:.82rem;color:var(--muted);letter-spacing:.02em;margin:16px 0 0;padding-top:14px;border-top:1px solid var(--line)} .wc-block-components-button.contained,.wc-block-components-button.wc-block-components-button.contained{background:var(--ink)!important;border-radius:0!important;color:var(--bg)!important} .wc-block-components-button.contained:hover{background:var(--accent)!important} .wc-block-checkout a,.wc-block-cart a{color:var(--accent)} .wc-block-components-text-input input,.wc-block-components-select select,.wc-block-components-text-input textarea{border-radius:0!important}

/* ===== v2: floating nav ===== */
html{scroll-padding-top:110px;scroll-behavior:smooth}
.site-main{padding-top:96px}
.site-header{position:fixed;inset:0 0 auto 0;z-index:70;padding:14px var(--gutter) 0;background:transparent;border:0;backdrop-filter:none}
.nav-shell{max-width:var(--wrap);margin-inline:auto;background:color-mix(in srgb,var(--bg) 80%,transparent);backdrop-filter:blur(12px);border:1px solid var(--line);box-shadow:0 14px 34px -22px rgba(20,19,17,.5);transition:background .3s,box-shadow .3s}
.site-header.is-stuck .nav-shell{background:color-mix(in srgb,var(--bg) 94%,transparent);box-shadow:0 16px 30px -20px rgba(20,19,17,.55)}
.nav{height:60px;padding-inline:24px}
.nav-cart{position:relative;display:inline-flex;align-items:center;color:var(--ink);margin-left:4px}
.nav-cart svg{display:block}
.nav-cart-count{position:absolute;top:-8px;right:-10px;min-width:16px;height:16px;padding:0 4px;border-radius:9px;background:var(--accent);color:#fff;font-size:.62rem;line-height:16px;text-align:center;font-weight:600;opacity:0;transform:scale(.6);transition:.2s}
.nav-cart-count.on{opacity:1;transform:scale(1)}
.hero{min-height:100svh;margin-top:-96px}
.page-hero{padding-block:clamp(24px,3vw,44px) clamp(24px,3vw,40px)}

/* ===== v2: product page ===== */
.woocommerce-product-gallery{position:relative}

.dsa-kind-label{display:block;margin-bottom:8px}
.sold-seal--product{position:absolute;top:16px;right:16px;z-index:5;width:78px;height:78px;font-size:.66rem}
.dsa-specs{display:grid;grid-template-columns:auto 1fr;gap:6px 20px;margin:22px 0 26px;padding:20px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);max-width:420px}
.dsa-specs dt{font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);font-weight:600;align-self:center}
.dsa-specs dd{margin:0;font-family:var(--font-display);font-size:1.15rem;color:var(--ink)}
.dsa-product-desc{margin-top:clamp(40px,6vw,72px);max-width:760px}
.dsa-product-desc h2{font-size:1.7rem;font-weight:500;margin-bottom:.5em}
.dsa-product-desc div{color:#2a2824;line-height:1.7}
.single-product .site-main .wrap,.single-product div.product{max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gutter)}
.woocommerce div.product p.price,.woocommerce div.product span.price{font-family:var(--font-display)!important;font-size:1.7rem!important;color:var(--ink)!important}

/* ===== v2: prints banner ===== */

.prints-banner{background:linear-gradient(135deg,#3a2419,#26170f);color:#f2e8dd;margin-top:-96px;padding-top:96px}
.prints-banner-inner{padding-block:clamp(36px,5vw,64px);text-align:center}
.prints-banner .eyebrow{color:#d9a689;display:block;margin-bottom:14px}
.prints-banner h1{font-size:clamp(2.8rem,6.4vw,4.7rem);font-weight:500;color:#fbf4ec;margin:0}
.prints-banner p{color:#e6d7c8;max-width:44ch;margin:16px auto 0;font-size:1.08rem}

/* ===== v2: commission steps + faq ===== */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,3vw,40px);margin:0 0 clamp(36px,5vw,60px)}
.step{border-top:1px solid var(--line);padding-top:20px}
.step-n{font-family:var(--font-display);font-size:2.4rem;color:var(--accent);line-height:1;display:block;margin-bottom:10px}
.step h3{font-family:var(--font-display);font-size:1.5rem;font-weight:600;margin:0 0 .4em}
.step p{color:var(--muted);font-size:.98rem;margin:0}
.faq{margin-top:clamp(48px,7vw,80px);max-width:760px}
.faq h2{font-size:clamp(1.8rem,3.6vw,2.6rem);font-weight:500;margin-bottom:.6em}
.faq details{border-top:1px solid var(--line);padding:18px 0}
.faq details:last-child{border-bottom:1px solid var(--line)}
.faq summary{font-family:var(--font-display);font-size:1.25rem;color:var(--ink);cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:16px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:'+';color:var(--accent);font-size:1.5rem;line-height:1;transition:transform .2s}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details p{color:var(--muted);margin:14px 0 0;line-height:1.7}

/* ===== v2: misc ===== */
.wrap-narrow{max-width:760px;margin-inline:auto}
.legal h2,.legal h3{font-family:var(--font-display);font-weight:600;margin:1.4em 0 .5em;font-size:1.4rem}
.legal p{margin:0 0 1em;color:#2f2c27}
.legal h4{font-family:var(--font-display);font-weight:600;font-size:1.15rem;margin:1.7em 0 .45em;color:var(--ink)}
.legal ul,.legal ol{margin:0 0 1.35em;padding-left:1.3em;color:#2f2c27}
.legal li{margin:0 0 .5em;line-height:1.75}
.legal li:last-child{margin-bottom:0}
.legal blockquote{margin:1.3em 0 1.6em;padding:1em 1.25em;border-left:3px solid var(--line);background:var(--surface);color:#3a362f;font-style:italic}
.legal blockquote p:last-child{margin-bottom:0}
.dsa-ship-note{background:var(--surface);border-left:2px solid var(--accent);padding:12px 18px;color:#3a352e;font-size:.95rem;margin:0 0 20px}
.foot-ig{display:inline-flex;align-items:center;gap:9px;margin-top:14px;color:#cfc7b8;transition:color .25s ease}.foot-ig__icon{flex:0 0 auto;width:20px;height:20px}
.foot-ig:hover{color:#fff}
.woocommerce ul.products li.product .price{font-family:var(--font-display)!important}

@media(max-width:820px){ .steps{grid-template-columns:1fr;gap:0} .step{padding:20px 0} }
@media(max-width:680px){
  .site-main{padding-top:82px}
  .hero{margin-top:-82px}
  .prints-banner{margin-top:-82px;padding-top:82px}
  .nav{height:52px;padding-inline:16px}
  .nav-links{position:absolute;top:calc(100% + 8px);left:0;right:0;background:var(--bg);border:1px solid var(--line);flex-direction:column;align-items:flex-start;gap:0;padding:6px 18px 16px;transform:translateY(-8px);opacity:0;visibility:hidden;transition:.28s;box-shadow:0 18px 30px -20px rgba(20,19,17,.4)}
  .site-header.open .nav-shell .nav-links{transform:none;opacity:1;visibility:visible}
  .nav-links li{width:100%;border-bottom:1px solid var(--line)}
  .nav-links a{display:block;padding:14px 0;font-size:1rem}
  .nav-toggle{display:block;order:3}
  .nav-cart{position:relative;inset:auto;transform:none;background:none;border:0;padding:0;box-shadow:none;flex-direction:row;order:2;margin-left:auto;margin-right:6px}
  .brand{order:1}
}
 .brand--logo{display:inline-flex;align-items:center} .brand--logo img{max-height:44px;width:auto;max-width:200px;display:block} /* ===== v3: product/shop layout (no sidebar, grid) ===== */ .wc-wrap{max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gutter);padding-block:clamp(28px,5vw,56px)} .single-product div.product{display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,5vw,64px);align-items:start;max-width:100%;margin:0;padding:0;float:none} .single-product div.product .woocommerce-product-gallery,.single-product div.product .summary,.single-product div.product .entry-summary{width:auto!important;float:none!important;margin:0!important} .single-product div.product .dsa-product-desc,.single-product div.product .woocommerce-tabs,.single-product div.product .related,.single-product div.product .up-sells{grid-column:1/-1} .single-product .dsa-product-desc{margin-top:clamp(20px,3vw,36px)} .woocommerce-breadcrumb{display:none!important} .woocommerce ul.products{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:clamp(20px,3vw,40px);margin:0;padding:0} .woocommerce ul.products li.product{width:auto!important;margin:0!important;float:none!important} @media(max-width:820px){.single-product div.product{grid-template-columns:1fr;gap:24px}}

/* ===== v4: nav active + merge, product layout, status tags, prints banner ===== */
/* Active-page nav underline (same cinnabar sweep as hover) */
.nav-links a:hover::after,.nav-links a.current::after,.nav-links li.current-menu-item>a::after,.nav-links li.current_page_item>a::after,.nav-links li.dsa-current>a::after{right:0}
/* Floating nav merges with the background: drop the persistent outline + shadow */
.nav-shell{border-color:transparent;box-shadow:none}
.site-header.is-stuck .nav-shell{background:var(--bg);box-shadow:none;border-color:transparent}
/* Prints banner: black (ink) instead of brown */
.prints-banner{background:var(--ink)}
.prints-banner .eyebrow{color:#b8b0a2}
.prints-banner h1{color:#f6f2ea}
.prints-banner p{color:#cfc7b8}
.prints-banner .eyebrow{color:var(--gold)}
/* Commissions heading on one line (desktop) */
.ph-oneline{max-width:none}
@media(min-width:640px){.ph-oneline{white-space:nowrap}}
/* Status tag on the artwork image (Originals only) */
.art-tag{position:absolute;top:14px;right:14px;z-index:5;display:inline-flex;align-items:center;font-family:var(--font-body);font-size:.72rem;font-weight:600;letter-spacing:normal;text-transform:none;line-height:1;padding:.3em .85em;border-radius:9999px;color:var(--surface);background:var(--ink);border:1px solid var(--ink);box-shadow:0 1px 2px 0 rgba(0,0,0,.05)}
.art-tag.is-sold{color:var(--ink);background:var(--surface);border-color:transparent}
.art-tag--product{top:16px;right:16px;font-size:.66rem;padding:.55em 1em}
/* Prints: sold-unframed note */
.dsa-frame-note{margin:14px 0 0;font-size:.85rem;color:var(--muted);letter-spacing:.02em}
/* Product page: smaller image, description in the right column */
.single-product div.product{grid-template-columns:minmax(0,440px) 1fr}
.single-product div.product .woocommerce-product-gallery{max-width:440px}
.single-product .summary .dsa-product-desc{grid-column:auto;margin-top:clamp(22px,3vw,34px);padding-top:22px;border-top:1px solid var(--line);max-width:none}
.single-product .summary .dsa-product-desc h2{font-size:1.35rem}
/* Add-to-cart + quantity refinement */
.woocommerce div.product form.cart{display:flex;align-items:stretch;gap:12px;margin:24px 0 4px;flex-wrap:wrap}
.woocommerce div.product form.cart .quantity{margin:0}
.woocommerce div.product form.cart .quantity .qty{width:74px;min-height:52px;border:1px solid var(--ink);background:var(--surface);color:var(--ink);text-align:center;font-family:var(--font-body);font-size:1rem;border-radius:0;padding:.4em .3em}
.woocommerce div.product form.cart .quantity .qty:focus{outline:0;border-color:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 16%,transparent)}
.woocommerce div.product form.cart .single_add_to_cart_button{flex:1 1 auto;min-height:52px;padding:.95em 2.2em;font-size:.82rem;letter-spacing:.14em;text-transform:uppercase}
/* Mobile: product back to a single column (kept last to win the cascade) */
@media(max-width:820px){
  .single-product div.product{grid-template-columns:1fr}
  .single-product div.product .woocommerce-product-gallery{max-width:none}
}

/* ===== v5: gallery carousel to the LEFT of the main image + CSS status overlay ===== */
.single-product div.product{grid-template-columns:minmax(0,480px) 1fr}
.single-product div.product .woocommerce-product-gallery{max-width:480px;position:relative;display:flex;flex-direction:row;gap:14px;align-items:flex-start}
.single-product .woocommerce-product-gallery .flex-viewport{flex:1 1 auto;min-width:0}
.single-product .woocommerce-product-gallery>.woocommerce-product-gallery__wrapper{flex:1 1 auto;min-width:0}
.single-product .woocommerce-product-gallery ol.flex-control-thumbs{order:-1;flex:0 0 62px;display:flex;flex-direction:column;gap:10px;margin:0;padding:0;list-style:none}
.single-product .woocommerce-product-gallery ol.flex-control-thumbs li{width:62px;margin:0;display:block}
.single-product .woocommerce-product-gallery ol.flex-control-thumbs img{width:100%;height:auto;display:block;opacity:.55;cursor:pointer;transition:opacity .2s;border:1px solid transparent}
.single-product .woocommerce-product-gallery ol.flex-control-thumbs img.flex-active,.single-product .woocommerce-product-gallery ol.flex-control-thumbs img:hover{opacity:1;border-color:var(--line)}
.single-product .summary .dsa-product-desc{max-width:62ch}
.single-product .woocommerce-product-gallery__trigger{top:auto!important;bottom:12px;right:12px;z-index:4}
/* Status overlay on the gallery (Originals) */
.single-product div.product.dsa-gtag .woocommerce-product-gallery::after{content:"Available";position:absolute;top:14px;right:14px;z-index:6;font-family:var(--font-body);font-size:.64rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;line-height:1;padding:.55em .9em;color:var(--ink);background:color-mix(in srgb,var(--surface) 90%,transparent);border:1px solid var(--ink);backdrop-filter:blur(2px)}
.single-product div.product.dsa-gtag--sold .woocommerce-product-gallery::after{content:"Sold";color:#fff;background:var(--accent);border-color:var(--accent)}
.single-product div.product.dsa-gseal .woocommerce-product-gallery::after{content:"Sold";position:absolute;top:16px;right:16px;z-index:6;display:inline-flex;align-items:center;justify-content:center;font-family:var(--font-body);font-size:.72rem;font-weight:600;letter-spacing:normal;text-transform:none;line-height:1;padding:.3em .85em;border-radius:9999px;color:var(--ink);background:var(--surface);border-color:transparent;box-shadow:0 1px 2px 0 rgba(0,0,0,.05)}
@media(max-width:820px){
  .single-product div.product{grid-template-columns:1fr}
  .single-product div.product .woocommerce-product-gallery{max-width:none}
}

/* ===== v6: bigger thumbs, fixed image box, smaller+rounded tags, rounded nav ===== */
/* 1. bigger carousel thumbnails */
.single-product .woocommerce-product-gallery ol.flex-control-thumbs{flex-basis:112px}
.single-product .woocommerce-product-gallery ol.flex-control-thumbs li{width:112px}
/* 5. main-image box locked to the upload ratio (675x844) so switching images never shifts the page */
.single-product .woocommerce-product-gallery .flex-viewport{aspect-ratio:675/844;height:auto!important;background:transparent;overflow:hidden}
.single-product .woocommerce-product-gallery .flex-viewport .woocommerce-product-gallery__wrapper{height:100%!important}
.single-product .woocommerce-product-gallery .woocommerce-product-gallery__image{height:100%!important}
.single-product .woocommerce-product-gallery .woocommerce-product-gallery__image>a{display:block;height:100%}
.single-product .woocommerce-product-gallery .flex-viewport img{width:100%!important;height:100%!important;object-fit:contain;background:transparent}
/* 4. status tags: rounded pill badges, black/white 75%-transparent like the reference design */
.art-tag{font-size:.72rem;padding:.3em .85em;border-radius:9999px}
.single-product div.product.dsa-gtag .woocommerce-product-gallery::after{font-weight:600;letter-spacing:normal;text-transform:none;font-size:.72rem;padding:.3em .85em;border-radius:9999px;color:var(--surface);background:var(--ink);border-color:var(--ink);box-shadow:0 1px 2px 0 rgba(0,0,0,.05)}
.single-product div.product.dsa-gtag--sold .woocommerce-product-gallery::after{color:var(--ink);background:var(--surface);border-color:transparent}
/* 6. rounded nav bar corners */
.nav-shell{border-radius:14px}


/* ===== v4: shop loop — add-to-cart docked to the artwork ===== */
.woocommerce ul.products li.product .dsa-media{position:relative;display:block;overflow:hidden;background:transparent;line-height:0}
.woocommerce ul.products li.product .dsa-media__link{display:block}
.woocommerce ul.products li.product .dsa-media img{display:block;width:100%;height:auto;margin:0;transition:transform .6s cubic-bezier(.22,.61,.36,1)}
.woocommerce ul.products li.product .dsa-loop-text{display:block;text-decoration:none;color:inherit;line-height:normal}
.woocommerce ul.products li.product:hover .dsa-media img{transform:scale(1.035)}

/* the docked bar: full-bleed across the foot of the image, flush and square */
.woocommerce ul.products li.product .dsa-media .button{position:absolute;left:0;right:0;bottom:0;width:100%;margin:0;display:flex;align-items:center;justify-content:center;min-height:46px;padding:13px 16px;border:0;border-radius:0!important;background:var(--ink)!important;color:var(--bg)!important;font-family:var(--font-body);font-size:.72rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;text-decoration:none;transform:translateY(101%);transition:transform .38s cubic-bezier(.22,.61,.36,1),background-color .25s ease}
.woocommerce ul.products li.product:hover .dsa-media .button,
.woocommerce ul.products li.product:focus-within .dsa-media .button{transform:translateY(0)}
.woocommerce ul.products li.product .dsa-media .button:hover{background:var(--accent)!important}
.woocommerce ul.products li.product .dsa-media .button:focus-visible{transform:translateY(0);outline:2px solid var(--bg);outline-offset:-6px}
.woocommerce ul.products li.product .dsa-media .button.loading{opacity:.75}

/* AJAX confirmation, parked over the artwork so it never disturbs the grid */
.woocommerce ul.products li.product .dsa-media .added_to_cart{position:absolute;top:0;right:0;z-index:2;background:var(--ink);color:var(--bg);padding:9px 14px;font-family:var(--font-body);font-size:.66rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;text-decoration:none;line-height:1.2}
.woocommerce ul.products li.product .dsa-media .added_to_cart:hover{background:var(--accent)}

/* touch devices have no hover to reveal it — dock it permanently */
@media(hover:none){.woocommerce ul.products li.product .dsa-media .button{transform:translateY(0)}}
@media(prefers-reduced-motion:reduce){.woocommerce ul.products li.product .dsa-media .button,.woocommerce ul.products li.product .dsa-media img{transition:none}.woocommerce ul.products li.product:hover .dsa-media img{transform:none}}

/* WooCommerce's clearfix on ul.products becomes a real grid item on a grid container,
   taking cell 1 and pushing every product one column right. Neutralise it. */
.woocommerce ul.products::before,.woocommerce ul.products::after{content:none;display:none}

/* WooCommerce appends a tick/spinner glyph from its icon font, which isn't loaded here
   and renders as tofu. The docked bar and the View cart pill carry the feedback instead. */
.woocommerce ul.products li.product .dsa-media .button::after{content:none!important;display:none!important}


/* ===== v5: catalog toolbar - price-only sorting, type filters, CTA below the price ===== */
/* Result count sits left, type filters and the sort control group together on the right. */
.woocommerce .dsa-toolbar{display:flex;align-items:center;flex-wrap:wrap;gap:14px 24px;margin:0 0 clamp(20px,3vw,32px)}
.woocommerce .dsa-toolbar .woocommerce-result-count{margin:0 auto 0 0;float:none;color:var(--muted);font-size:.85rem}
.woocommerce .dsa-toolbar .woocommerce-ordering{margin:0;float:none}

/* Originals / Prints. Underline is drawn with a pseudo-element so the active state and
   the hover state are the same gesture, and neither shifts the text by a pixel. */
.dsa-filters{display:flex;align-items:center;gap:20px}
.dsa-filters__link{position:relative;font-family:var(--font-body);font-size:.72rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);text-decoration:none;padding-block:4px;white-space:nowrap;transition:color .22s ease}
.dsa-filters__link::after{content:'';position:absolute;left:0;right:0;bottom:0;height:1px;background:currentColor;transform:scaleX(0);transform-origin:left;transition:transform .3s cubic-bezier(.22,.61,.36,1)}
.dsa-filters__link:hover,.dsa-filters__link.is-active{color:var(--ink)}
.dsa-filters__link:hover::after,.dsa-filters__link.is-active::after{transform:scaleX(1)}
.dsa-filters__link:focus-visible{outline:2px solid var(--accent);outline-offset:4px}

/* Sort control: no native chrome, no fill - just type on the page under a hairline. */
.woocommerce-ordering select.orderby{appearance:none;-webkit-appearance:none;background-color:transparent;background-image:url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3e%3cpath d='M1 1l5 5 5-5' stroke='%236B655C' stroke-width='1.4' fill='none'/%3e%3c/svg%3e");background-repeat:no-repeat;background-position:right 1px center;background-size:11px 7px;border:0;border-bottom:1px solid var(--line);border-radius:0;box-shadow:none;color:var(--ink);font-family:var(--font-body);font-size:.72rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;padding:5px 24px 5px 0;width:auto;max-width:none;cursor:pointer;transition:border-color .22s ease,color .22s ease}
.woocommerce-ordering select.orderby:hover{border-bottom-color:var(--ink)}
.woocommerce-ordering select.orderby:focus-visible{outline:2px solid var(--accent);outline-offset:4px}
/* the open list is drawn by the OS, not the page - this only keeps its text legible */
.woocommerce-ordering select.orderby option{background:var(--surface);color:var(--ink);letter-spacing:normal;text-transform:none;font-weight:400}

/* The touch CTA: a rectangle tabbed onto the foot of the artwork and exactly as wide as
   it, hollow so only the rule and the words carry it. Hidden by default - pointer
   devices use the docked bar instead. */
.woocommerce ul.products li.product .dsa-cta{display:none;flex-direction:column;align-items:stretch;margin:0}
.woocommerce ul.products li.product .dsa-cta .button{display:flex;align-items:center;justify-content:center;width:100%;min-height:46px;margin:0;padding:13px 16px;border:1px solid var(--ink);border-radius:0!important;background:transparent!important;color:var(--ink)!important;font-family:var(--font-body);font-size:.7rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;text-align:center;text-decoration:none;transform:none;transition:background-color .25s ease,color .25s ease}
/* WooCommerce would put a tick from its unloaded icon font here; the box carries the label alone */
.woocommerce ul.products li.product .dsa-cta .button::after{content:none!important;display:none!important}
.woocommerce ul.products li.product .dsa-cta .button:hover,
.woocommerce ul.products li.product .dsa-cta .button:active{background:var(--ink)!important;color:var(--bg)!important}
.woocommerce ul.products li.product .dsa-cta .button:focus-visible{outline:2px solid var(--accent);outline-offset:-5px}
.woocommerce ul.products li.product .dsa-cta .button.loading{opacity:.55}
/* confirmation stacks straight underneath, the two borders collapsed into one rule */
.woocommerce ul.products li.product .dsa-cta .added_to_cart{display:flex;align-items:center;justify-content:center;width:100%;min-height:40px;margin:-1px 0 0;padding:10px 16px;border:1px solid var(--line);background:transparent;color:var(--accent);font-family:var(--font-body);font-size:.64rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;text-decoration:none}
.woocommerce ul.products li.product .dsa-cta .added_to_cart:hover{color:var(--accent-ink)}

/* Touch and small screens: there is no hover to reveal the docked bar, and anything
   parked on the artwork competes with it. Remove the bar outright and hang the box off
   the foot of the image instead - nothing at all over the painting. The box is DOM-ordered
   after the caption, so the item becomes a flex column and the box is reordered above it. */
@media(hover:none),(max-width:640px){
	.woocommerce ul.products li.product{display:flex;flex-direction:column}
	.woocommerce ul.products li.product .dsa-media{order:1}
	.woocommerce ul.products li.product .dsa-cta{order:2;display:flex}
	.woocommerce ul.products li.product .dsa-loop-text{order:3;padding-top:2px}
	.woocommerce ul.products li.product .dsa-media .button,
	.woocommerce ul.products li.product:hover .dsa-media .button,
	.woocommerce ul.products li.product:focus-within .dsa-media .button,
	.woocommerce ul.products li.product .dsa-media .added_to_cart{display:none!important}
}
@media(max-width:640px){
	.woocommerce .dsa-toolbar{gap:12px 18px}
	.woocommerce .dsa-toolbar .woocommerce-result-count{width:100%;margin:0}
	.dsa-filters{gap:16px}
	.dsa-filters__link,.woocommerce-ordering select.orderby{font-size:.66rem;letter-spacing:.12em}
}

@media(prefers-reduced-motion:reduce){
	.dsa-filters__link::after,.woocommerce ul.products li.product .dsa-cta .button::after{transition:none}
}

/* ===== v6: gallery wall - add-to-cart, matching the shop loop ===== */
/* The card used to be one big <a>, so a cart link could not sit inside it. It is now a
   <div> with the artwork and the caption each carrying their own link. The image link is
   hidden from assistive tech - the caption link goes to the same place. */
.wall .piece-media__link{display:block;line-height:0}
.wall .piece-cap{text-decoration:none;color:inherit}

/* Docked bar, pointer devices: slides up out of the foot of the artwork on hover. */
.wall .piece-media .button{position:absolute;left:0;right:0;bottom:0;z-index:4;width:100%;margin:0;display:flex;align-items:center;justify-content:center;min-height:46px;padding:13px 16px;border:0;border-radius:0!important;background:var(--ink)!important;color:var(--bg)!important;font-family:var(--font-body);font-size:.72rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;text-decoration:none;transform:translateY(101%);transition:transform .38s cubic-bezier(.22,.61,.36,1),background-color .25s ease}
.wall .piece:hover .piece-media .button,
.wall .piece:focus-within .piece-media .button{transform:translateY(0)}
.wall .piece-media .button:hover{background:var(--accent)!important}
.wall .piece-media .button:focus-visible{transform:translateY(0);outline:2px solid var(--bg);outline-offset:-6px}
.wall .piece-media .button.loading{opacity:.75}
.wall .piece-media .button::after{content:none!important;display:none!important}
/* confirmation parks top-left - the Available/Sold tag already owns the top-right corner */
.wall .piece-media .added_to_cart{position:absolute;top:0;left:0;z-index:5;background:var(--ink);color:var(--bg);padding:9px 14px;font-family:var(--font-body);font-size:.66rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;text-decoration:none;line-height:1.2}
.wall .piece-media .added_to_cart:hover{background:var(--accent)}

/* Touch: hollow rectangle hung off the foot of the artwork, exactly as wide as it. */
.wall .piece-cta{display:none;flex-direction:column;align-items:stretch;margin:0}
.wall .piece-cta .button{display:flex;align-items:center;justify-content:center;width:100%;min-height:46px;margin:0;padding:13px 16px;border:1px solid var(--ink);border-radius:0!important;background:transparent!important;color:var(--ink)!important;font-family:var(--font-body);font-size:.7rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;text-decoration:none;transition:background-color .25s ease,color .25s ease}
.wall .piece-cta .button::after{content:none!important;display:none!important}
.wall .piece-cta .button:hover,
.wall .piece-cta .button:active{background:var(--ink)!important;color:var(--bg)!important}
.wall .piece-cta .button:focus-visible{outline:2px solid var(--accent);outline-offset:-5px}
.wall .piece-cta .button.loading{opacity:.55}
.wall .piece-cta .added_to_cart{display:flex;align-items:center;justify-content:center;width:100%;min-height:40px;margin:-1px 0 0;padding:10px 16px;border:1px solid var(--line);background:transparent;color:var(--accent);font-family:var(--font-body);font-size:.64rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;text-decoration:none}
.wall .piece-cta .added_to_cart:hover{color:var(--accent-ink)}

@media(hover:none),(max-width:640px){
	.wall .piece-media .button,
	.wall .piece:hover .piece-media .button,
	.wall .piece:focus-within .piece-media .button,
	.wall .piece-media .added_to_cart{display:none!important}
	.wall .piece-cta{display:flex}
}

@media(prefers-reduced-motion:reduce){
	.wall .piece-media .button{transition:none}
}

/* ===== v8: gallery wall carousel - swipe on touch, arrows + dots on pointer ===== */
.piece-gal{position:relative;display:flex;aspect-ratio:var(--piece-ar,4 / 5);overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;scroll-behavior:auto;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.piece-gal::-webkit-scrollbar{display:none}
/* overflow:hidden is load-bearing - the hover zoom scales the image, and a transformed child
   would otherwise extend the scroller's scrollable width and let the next slide peek through */
.piece-gal__slide{flex:0 0 100%;scroll-snap-align:start;scroll-snap-stop:always;display:block;height:100%;line-height:0;overflow:hidden}
.piece-gal__slide img{width:100%;height:100%;object-fit:cover;display:block}

.piece-gal__arrow{position:absolute;top:50%;z-index:6;transform:translateY(-50%);display:flex;align-items:center;justify-content:center;width:34px;height:34px;padding:0;border:0;border-radius:50%;background:rgba(251,250,246,.88);color:var(--ink);cursor:pointer;opacity:0;transition:opacity .25s ease,background-color .2s ease}
.piece-gal__arrow[hidden]{display:none}
.piece-gal__arrow.is-prev{left:10px}
.piece-gal__arrow.is-next{right:10px}
.piece:hover .piece-gal__arrow,.piece:focus-within .piece-gal__arrow{opacity:1}
.piece-gal__arrow:hover{background:#FBFAF6}
.piece-gal__arrow:focus-visible{opacity:1;outline:2px solid var(--ink);outline-offset:2px}
.piece-gal__arrow[disabled]{opacity:0!important;pointer-events:none}

.piece-gal__dots{position:absolute;left:50%;bottom:12px;z-index:6;display:flex;align-items:center;gap:2px;padding:3px 5px;border-radius:999px;background:rgba(27,26,23,.34);transform:translateX(-50%);transition:transform .38s cubic-bezier(.22,.61,.36,1)}
.piece-gal__dots:empty{display:none}
.piece-gal__dot{display:block;width:16px;height:16px;padding:0;border:0;background:none;cursor:pointer;position:relative}
.piece-gal__dot::before{content:'';position:absolute;inset:5px;border-radius:50%;background:rgba(251,250,246,.55);transition:background-color .25s ease,transform .25s ease}
.piece-gal__dot.on::before{background:#FBFAF6;transform:scale(1.15)}
.piece-gal__dot:focus-visible{outline:2px solid #FBFAF6;outline-offset:0;border-radius:50%}
/* lift the dots clear of the docked cart bar as it slides up - only on cards that have one */
.piece:hover .piece-media:has(> .button) .piece-gal__dots,
.piece:focus-within .piece-media:has(> .button) .piece-gal__dots{transform:translate(-50%,-46px)}

@media(hover:none),(max-width:640px){
  /* touch swipes the strip, so the arrows are dead weight; the cart bar is hidden here too,
     which is why the dots stay put at the foot of the artwork */
  .piece-gal__arrow{display:none}
  .piece:hover .piece-media:has(> .button) .piece-gal__dots,
  .piece:focus-within .piece-media:has(> .button) .piece-gal__dots{transform:translateX(-50%)}
}
@media(prefers-reduced-motion:reduce){
  .piece-gal__dots{transition:none}
}

/* ===== v9: announcement bar ===== */
:root{--dsa-bar-h:36px;--dsa-bar-top:0px}
.dsa-bar{position:fixed;top:var(--dsa-bar-top);left:0;right:0;z-index:80;display:flex;align-items:center;height:var(--dsa-bar-h);overflow:hidden;font-family:var(--font-body);font-size:.7rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;line-height:1}
.dsa-bar--ink{background:var(--ink);color:var(--bg)}
.dsa-bar--accent{background:var(--accent);color:#fff}
.dsa-bar--gold{background:var(--gold);color:var(--ink)}
.dsa-bar__viewport{flex:1 1 auto;min-width:0;overflow:hidden}
.dsa-bar__track{display:flex;align-items:center;width:max-content}
/* a flex container drops the whitespace around its items, which ate the space in front of an
   inline link and printed "this weekShop prints" - so the copy stays a plain block */
.dsa-bar__copy{display:block;white-space:nowrap}
.dsa-bar__sep{margin:0 1.7em;font-size:.6em;opacity:.45}
.dsa-bar a{color:inherit;text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px;transition:opacity .2s ease}
.dsa-bar a:hover{opacity:.75}
.dsa-bar__a{text-decoration:none}
/* the whole-bar link underlines on hover only, or the entire strip would look like one long link */
.dsa-bar__a:hover{opacity:1;text-decoration:underline}

/* the strip only animates once app.js has cloned enough copies to fill it and worked out a
   duration from the real width - so speed stays constant whatever the message length */
.dsa-bar.is-running .dsa-bar__track{animation:dsa-bar-scroll var(--dsa-bar-dur,30s) linear infinite;will-change:transform}
.dsa-bar.is-running:hover .dsa-bar__track,
.dsa-bar.is-running:focus-within .dsa-bar__track,
.dsa-bar.is-paused .dsa-bar__track{animation-play-state:paused}
@keyframes dsa-bar-scroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* WCAG 2.2.2 wants a way to stop moving text that a hover cannot give a touch or keyboard user */
.dsa-bar__pause{flex:0 0 auto;display:flex;align-items:center;justify-content:center;width:34px;height:100%;padding:0;border:0;border-left:1px solid currentColor;background:none;color:inherit;opacity:.55;cursor:pointer;transition:opacity .2s ease}
.dsa-bar__pause[hidden]{display:none}
.dsa-bar__pause:hover{opacity:1}
.dsa-bar__pause:focus-visible{opacity:1;outline:2px solid currentColor;outline-offset:-3px}
.dsa-bar__ico{display:block}
.dsa-bar__ico.is-play,.dsa-bar.is-paused .dsa-bar__ico.is-pause{display:none}
.dsa-bar.is-paused .dsa-bar__ico.is-play{display:block}

/* reduced motion: one static, centred copy - nothing moves and nothing needs pausing */
.dsa-bar.is-static .dsa-bar__viewport{display:flex;justify-content:center}
.dsa-bar.is-static .dsa-bar__copy:not(:first-child),
.dsa-bar.is-static .dsa-bar__sep,
.dsa-bar.is-static .dsa-bar__pause{display:none}
.dsa-bar.is-static .dsa-bar__copy{white-space:normal;text-align:center;padding-inline:16px}

/* Room for the bar. body padding shifts everything in flow at every breakpoint at once, so the
   96px/82px .site-main offsets stay untouched; the header is fixed, so it needs its own nudge. */
body.has-dsa-bar{padding-top:var(--dsa-bar-h)}
body.has-dsa-bar .site-header{padding-top:calc(14px + var(--dsa-bar-h))}
html:has(.dsa-bar){scroll-padding-top:calc(110px + var(--dsa-bar-h))}
/* logged in, the admin bar owns the top of the screen - sit under it, not behind it */
body.admin-bar .dsa-bar{--dsa-bar-top:var(--wp-admin--admin-bar--height,32px)}
body.admin-bar.has-dsa-bar .site-header{padding-top:calc(14px + var(--dsa-bar-h) + var(--wp-admin--admin-bar--height,32px))}
@media(max-width:782px){
  body.admin-bar .dsa-bar{--dsa-bar-top:var(--wp-admin--admin-bar--height,46px)}
  body.admin-bar.has-dsa-bar .site-header{padding-top:calc(14px + var(--dsa-bar-h) + var(--wp-admin--admin-bar--height,46px))}
}
@media(max-width:680px){
  :root{--dsa-bar-h:32px}
  .dsa-bar{font-size:.63rem;letter-spacing:.12em}
  .dsa-bar__sep{margin:0 1.2em}
  .dsa-bar__pause{width:30px}
}
@media(prefers-reduced-motion:reduce){
  .dsa-bar .dsa-bar__track{animation:none;transform:none}
}
/* ===== v11: free delivery note ===== */
.dsa-ship{display:inline-flex;align-items:center;gap:.55em;margin:12px 0 0;font-family:var(--font-body);font-size:.7rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--gold);line-height:1.2}
.dsa-ship svg{width:14px;height:14px;flex:0 0 auto}
/* the prints banner is a dark panel, so the gold used elsewhere goes muddy on it */
.prints-banner .dsa-ship{color:#e3c9a8}
/* on the product page it sits in body copy rather than beside a heading, so it
   reads as reassurance rather than as another label competing with the price */
.dsa-ship--product{margin-top:16px;color:var(--ink);opacity:.72;letter-spacing:.14em}
@media(max-width:680px){.dsa-ship{font-size:.64rem;letter-spacing:.14em}}

/* v12: delivery line beside section headings */
.dsa-ship-lead{margin:0 0 1em;max-width:34ch;color:var(--muted);font-size:1.02rem;text-align:right}
.sec-head--ship .dsa-ship-lead{margin-bottom:0}
.sec-head--ship{justify-content:flex-end;margin-bottom:clamp(16px,2vw,26px)}
.section--prints{padding-top:clamp(24px,3vw,42px)}
@media(max-width:900px){.dsa-ship-lead{text-align:left}.sec-head--ship{justify-content:flex-start}}


/* v14: cookie consent */
.dsa-consent{position:fixed;left:0;right:0;bottom:0;z-index:120;background:var(--ink);color:#f2ede4;border-top:1px solid rgba(255,255,255,.14);box-shadow:0 -10px 30px rgba(0,0,0,.18)}
.dsa-consent[hidden]{display:none}
.dsa-consent__inner{max-width:1200px;margin:0 auto;padding:16px clamp(16px,4vw,40px);display:flex;align-items:center;gap:14px 28px;flex-wrap:wrap}
.dsa-consent__text{margin:0;flex:1 1 360px;font-size:.9rem;line-height:1.55;color:#e3dcd1}
.dsa-consent__text a{color:var(--gold);text-decoration:underline;text-underline-offset:2px}
.dsa-consent__actions{display:flex;gap:10px;flex:0 0 auto}
.dsa-consent__btn{font:inherit;font-size:.7rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;padding:12px 20px;border:1px solid rgba(255,255,255,.5);background:transparent;color:#f2ede4;cursor:pointer;transition:background-color .25s ease,color .25s ease,border-color .25s ease}
.dsa-consent__btn:hover{background:rgba(255,255,255,.14)}
.dsa-consent__btn--accept{background:var(--gold);border-color:var(--gold);color:var(--ink)}
.dsa-consent__btn--accept:hover{filter:brightness(1.08)}
.dsa-consent__btn:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
@media(max-width:680px){.dsa-consent__actions{width:100%}.dsa-consent__btn{flex:1 1 0;padding:12px 8px;text-align:center}}

/* ---------- Price on request ---------- */
/* A piece with no price reads as an invitation rather than a zero. The wall's enquiry button
   needs no rules of its own: it carries .button, which .piece-media and .piece-cta already style. */
.piece-cap .pr.is-poa{font-style:italic;letter-spacing:.01em}
.dsa-poa{font-style:italic;color:var(--muted)}
.dsa-enquire-wrap{margin:18px 0 0}
/* Colour, type and hover all come from the site-wide .woocommerce a.button rule, so this reads
   exactly like Add to cart does on a priced piece. Only the box is set here, and it has to
   out-specify WooCommerce's own .woocommerce a.button, which loads after the theme and would
   otherwise win the tie and leave the label sitting at the left of a full-width button. */
.dsa-enquire-wrap a.dsa-enquire{display:flex;align-items:center;justify-content:center;width:100%;min-height:52px;padding:.95em 2.2em;text-align:center;text-decoration:none}
.dsa-enquire-wrap a.dsa-enquire:focus-visible{outline:2px solid var(--accent);outline-offset:2px}