/* DecalsHouse product page: "Got your own design?" button + vinyl/printed chooser popup.
   Same look as the homepage band (dark green, yellow, cream cards, Bebas Neue + Inter). Everything is scoped to .dh-pcta / .dh-chooser. */
@font-face{font-family:"DH Inter";font-style:normal;font-weight:500;font-display:swap;src:url(../fonts/dh-inter-latin-500-normal.woff2) format("woff2");unicode-range:u+00??,u+0131,u+0152-0153,u+02bb-02bc,u+02c6,u+02da,u+02dc,u+0304,u+0308,u+0329,u+2000-206f,u+20ac,u+2122,u+2191,u+2193,u+2212,u+2215,u+feff,u+fffd}
@font-face{font-family:"DH Bebas Narrow";src:local("Arial Narrow"),local("ArialNarrow"),local("Liberation Sans Narrow"),local("LiberationSansNarrow");size-adjust:69.08%;ascent-override:130.28%;descent-override:43.43%;line-gap-override:0%}
@font-face{font-family:"DH Bebas Roboto";src:local("Roboto"),local("Roboto-Regular");size-adjust:62%;ascent-override:145.16%;descent-override:48.39%;line-gap-override:0%}
@font-face{font-family:"DH Bebas Arial";src:local("Arial"),local("ArialMT"),local("Helvetica"),local("Liberation Sans"),local("LiberationSans");size-adjust:56.65%;ascent-override:158.88%;descent-override:52.96%;line-gap-override:0%}
@font-face{font-family:"DH Bebas DejaVu";src:local("DejaVu Sans"),local("DejaVuSans");size-adjust:57.11%;ascent-override:157.58%;descent-override:52.53%;line-gap-override:0%}

.dh-pcta,.dh-chooser{
  --dh-green:#105148;--dh-green-deep:#0b3b35;--dh-teal:#1d7468;--dh-yellow:#e9dc76;--dh-yellow-hi:#f3ea93;
  --dh-cream:#fffdf4;--dh-ink:#17302c;--dh-close:#2d665e;
  --dh-display:"Bebas Neue","DH Bebas Narrow","DH Bebas Roboto","DH Bebas Arial","DH Bebas DejaVu","Arial Narrow",Impact,sans-serif;
  --dh-body:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  --dh-body-500:"DH Inter","Inter",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  --dh-ease:cubic-bezier(.22,.75,.2,1);
}
.dh-pcta *,.dh-chooser *{box-sizing:border-box}
.dh-pcta svg,.dh-chooser svg{display:block}

/* ===== The button in the product column ===== */
.dh-pcta{position:relative;isolation:isolate;overflow:hidden;display:block;container-type:inline-size;margin:0;border-radius:12px;background:var(--dh-green);color:#fff;text-decoration:none;font-family:var(--dh-body);box-shadow:0 12px 26px -16px rgba(11,59,53,.75);transition:transform .45s var(--dh-ease),box-shadow .45s var(--dh-ease);-webkit-tap-highlight-color:transparent}
.dh-pcta::before{content:"";position:absolute;z-index:-1;inset:-70% -15% auto;height:130%;background:radial-gradient(55% 55% at 50% 0%,rgba(255,255,255,.12),transparent 70%);pointer-events:none}
.dh-pcta::after{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(112deg,transparent 38%,rgba(233,220,118,.2) 50%,transparent 62%);transform:translateX(-100%);opacity:0;pointer-events:none;transition:opacity .25s,transform 0s .25s}
.dh-pcta:hover,.dh-pcta:focus,.dh-pcta:active{color:#fff;text-decoration:none}
.dh-pcta:focus-visible{outline:3px solid var(--dh-teal);outline-offset:3px}
/* the theme strips box-shadow from anything focused by mouse (:focus:not(:focus-visible){box-shadow:none!important}); keep ours */
.dh-pcta.dh-pcta:focus{box-shadow:0 12px 26px -16px rgba(11,59,53,.75)!important}
.dh-pcta .dh-pcta__in{display:grid;grid-template-columns:auto minmax(0,1fr) auto;grid-template-areas:"icon body btn";column-gap:14px;align-items:center;padding:16px 14px 16px 16px}
.dh-pcta .dh-pcta__icon{grid-area:icon;width:30px;color:#fff;animation:dh-pp-float 4.2s ease-in-out infinite}
.dh-pcta .dh-pcta__icon svg{width:100%;height:auto;fill:currentColor}
.dh-pcta .dh-pcta__body{grid-area:body;display:flex;flex-direction:column;gap:5px;min-width:0}
.dh-pcta .dh-pcta__h{display:block;margin:0;font:400 26px/.95 var(--dh-display);letter-spacing:.012em;text-transform:uppercase;color:#fff;text-wrap:balance}
.dh-pcta .dh-pcta__h span{color:var(--dh-yellow)}
.dh-pcta .dh-pcta__sub{display:block;margin:0;font:400 13.5px/1.4 var(--dh-body);color:rgba(255,255,255,.88);text-wrap:pretty}
/* phones: a round yellow arrow; wider columns: the full "Choose type" pill */
.dh-pcta .dh-pcta__btn{grid-area:btn;display:inline-flex;align-items:center;justify-content:center;gap:.6em;width:40px;height:40px;border-radius:999px;background:transparent;box-shadow:inset 0 0 0 1.5px var(--dh-yellow);color:var(--dh-yellow);font:400 17px/1 var(--dh-display);letter-spacing:.08em;text-transform:uppercase;white-space:nowrap;transition:background .3s,color .3s}
.dh-pcta .dh-pcta__lbl{display:none}
.dh-pcta .dh-pcta__btn svg{width:11px;height:auto;margin-left:2px;fill:currentColor;transition:transform .35s var(--dh-ease)}
@container (min-width:440px){
  .dh-pcta .dh-pcta__in{column-gap:16px;padding:16px 18px 16px 20px}
  .dh-pcta .dh-pcta__icon{width:34px}
  .dh-pcta .dh-pcta__h{font-size:28px}
  .dh-pcta .dh-pcta__sub{font-size:14px}
  .dh-pcta .dh-pcta__btn{width:auto;height:auto;padding:.72em 1.15em .54em}
  .dh-pcta .dh-pcta__lbl{display:inline}
  .dh-pcta .dh-pcta__btn svg{width:.58em;margin-left:0}
}
/* very narrow phones: drop the icon so the heading keeps one line */
@container (max-width:320px){
  .dh-pcta .dh-pcta__in{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"body btn"}
  .dh-pcta .dh-pcta__icon{display:none}
}

/* ===== The popup ===== */
.dh-chooser{position:fixed;inset:0;z-index:1080;display:flex;align-items:center;justify-content:center;padding:max(16px,env(safe-area-inset-top,0px)) max(16px,env(safe-area-inset-right,0px)) max(16px,env(safe-area-inset-bottom,0px)) max(16px,env(safe-area-inset-left,0px));font-family:var(--dh-body);-webkit-font-smoothing:antialiased}
.dh-chooser[hidden]{display:none!important}
.dh-chooser .dh-chooser__backdrop{position:absolute;inset:0;background:rgba(8,32,29,.62);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);cursor:pointer;animation:dh-pp-fade .3s ease backwards}
.dh-chooser .dh-chooser__dialog{position:relative;isolation:isolate;display:flex;flex-direction:column;width:100%;max-width:880px;max-height:calc(100vh - 32px);max-height:calc(100dvh - 32px);background:var(--dh-green);color:#fff;border-radius:26px;box-shadow:0 40px 90px -30px rgba(0,0,0,.6);overflow:hidden;outline:none;animation:dh-pp-rise .5s var(--dh-ease) backwards}
.dh-chooser .dh-chooser__dialog.dh-chooser__dialog{box-shadow:0 40px 90px -30px rgba(0,0,0,.6)!important}
.dh-chooser .dh-chooser__dialog::before{content:"";position:absolute;z-index:-1;inset:-30% -10% auto;height:60%;background:radial-gradient(55% 60% at 50% 0%,rgba(255,255,255,.11),transparent 70%);pointer-events:none}
.dh-chooser .dh-chooser__scroll{overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;padding:34px 34px 30px}
.dh-chooser .dh-chooser__close{position:absolute;z-index:3;top:14px;right:14px;width:44px;height:44px;margin:0;padding:0;border:0;border-radius:50%;background:var(--dh-close);color:#fff;display:grid;place-items:center;cursor:pointer;box-shadow:0 4px 14px rgba(0,0,0,.18);transition:background .25s,color .25s,transform .4s var(--dh-ease)}
.dh-chooser .dh-chooser__close svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2.6;stroke-linecap:round}
.dh-chooser .dh-chooser__close:focus-visible{outline:3px solid var(--dh-yellow);outline-offset:2px}

.dh-chooser .dh-chooser__head{text-align:center;padding-inline:44px}
.dh-chooser .dh-chooser__title{margin:0;font:400 50px/.92 var(--dh-display);letter-spacing:.012em;text-transform:uppercase;color:#fff}
.dh-chooser .dh-chooser__line{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.06em;margin-bottom:-.06em}
.dh-chooser .dh-chooser__line > span{display:block;animation:dh-pp-line .8s var(--dh-ease) .08s backwards}
.dh-chooser .dh-chooser__line + .dh-chooser__line > span{color:var(--dh-yellow);animation-delay:.16s}
.dh-chooser .dh-chooser__sub{margin:12px auto 0;max-width:30em;font:400 16px/1.5 var(--dh-body);color:rgba(255,255,255,.88);text-wrap:pretty}

.dh-chooser .dh-chooser__cards{display:grid;grid-template-columns:minmax(0,1fr);gap:16px;margin:26px 0 0;padding:0}
.dh-chooser .dh-chooser__card{position:relative;isolation:isolate;overflow:hidden;display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-rows:auto auto auto auto 1fr;grid-template-areas:"tag art" "title art" "copy copy" "list list" "cta cta";column-gap:14px;row-gap:10px;background:var(--dh-cream);border:3px solid var(--dh-yellow);border-radius:20px;padding:20px 22px 20px;color:var(--dh-ink);text-decoration:none;box-shadow:0 10px 30px rgba(0,0,0,.18);transition:transform .45s var(--dh-ease),box-shadow .45s var(--dh-ease),border-color .3s;animation:dh-pp-pop .6s var(--dh-ease) var(--d,.18s) backwards;-webkit-tap-highlight-color:transparent}
.dh-chooser .dh-chooser__card + .dh-chooser__card{--d:.25s}
.dh-chooser .dh-chooser__card::after{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(112deg,transparent 38%,rgba(233,220,118,.38) 50%,transparent 62%);transform:translateX(-100%);opacity:0;pointer-events:none;transition:opacity .25s,transform 0s .25s}
.dh-chooser .dh-chooser__card:hover,.dh-chooser .dh-chooser__card:focus,.dh-chooser .dh-chooser__card:active{color:var(--dh-ink);text-decoration:none}
.dh-chooser .dh-chooser__card:focus-visible{outline:3px solid #fff;outline-offset:4px}
.dh-chooser .dh-chooser__tag{grid-area:tag;justify-self:start;align-self:end;font:400 15px/1 var(--dh-display);letter-spacing:.09em;text-transform:uppercase;background:var(--dh-teal);color:#fff;padding:7px 14px 5px;border-radius:999px}
.dh-chooser .dh-chooser__ctitle{grid-area:title;align-self:start;margin:2px 0 0;font:400 40px/.95 var(--dh-display);letter-spacing:.012em;text-transform:uppercase;color:var(--dh-green);text-wrap:balance}
.dh-chooser .dh-chooser__ctitle em{font-style:normal;color:var(--dh-teal)}
.dh-chooser .dh-chooser__art{grid-area:art;align-self:center;animation:dh-pp-float 5.5s ease-in-out infinite}
.dh-chooser .dh-chooser__card + .dh-chooser__card .dh-chooser__art{animation-delay:1.1s}
.dh-chooser .dh-chooser__icon{width:78px;height:auto;color:var(--dh-teal);fill:currentColor;transition:transform .5s var(--dh-ease)}
.dh-chooser .dh-chooser__copy{grid-area:copy;margin:4px 0 0;font:400 15px/1.5 var(--dh-body);color:var(--dh-ink);text-wrap:pretty}
.dh-chooser .dh-chooser__list{grid-area:list;list-style:none;margin:2px 0 0;padding:0;display:flex;flex-direction:column;gap:7px}
.dh-chooser .dh-chooser__list li{display:flex;align-items:flex-start;gap:10px;margin:0;padding:0;font:500 14.5px/1.4 var(--dh-body-500);color:var(--dh-ink)}
.dh-chooser .dh-chooser__list li::before{content:none}
.dh-chooser .dh-chooser__list li > span{min-width:0;text-wrap:pretty}
.dh-chooser .dh-chooser__nw{white-space:nowrap}
.dh-chooser .dh-chooser__list svg{flex:0 0 auto;width:18px;height:18px;margin-top:1px;fill:var(--dh-teal)}
.dh-chooser .dh-chooser__cta{grid-area:cta;align-self:end;justify-self:start;margin-top:8px;display:inline-flex;align-items:center;gap:10px;font:600 15px/1 var(--dh-body);color:var(--dh-green);white-space:nowrap}
.dh-chooser .dh-chooser__cta svg{width:12px;height:auto;fill:var(--dh-teal);transition:transform .35s var(--dh-ease)}

.dh-chooser .dh-chooser__hint{display:flex;align-items:flex-start;gap:12px;margin:20px 0 0;padding:14px 18px;border:1.5px dashed rgba(233,220,118,.55);border-radius:16px;font:400 14.5px/1.5 var(--dh-body);color:rgba(255,255,255,.9)}
.dh-chooser .dh-chooser__hint > span{min-width:0;text-wrap:pretty}
.dh-chooser .dh-chooser__hint svg{flex:0 0 auto;width:20px;height:20px;margin-top:1px;fill:none;stroke:var(--dh-yellow);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.dh-chooser .dh-chooser__hint strong{font-weight:700;color:var(--dh-yellow)}
.dh-chooser .dh-chooser__hint b{font-weight:600;color:#fff}

/* tablets and up: two cards side by side */
@media (min-width:768px){
  .dh-chooser .dh-chooser__cards{grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
}
@media (min-width:768px) and (max-width:991.98px){
  .dh-chooser .dh-chooser__ctitle{font-size:32px}
  .dh-chooser .dh-chooser__icon{width:60px}
}
/* phones: the popup becomes a sheet that slides up from the bottom; the close button stays put while the content scrolls */
@media (max-width:575.98px){
  .dh-chooser{align-items:flex-end;padding:0}
  .dh-chooser .dh-chooser__dialog{max-width:none;max-height:calc(100vh - 28px);max-height:calc(100dvh - 28px);border-radius:24px 24px 0 0;animation-name:dh-pp-sheet;animation-duration:.55s}
  .dh-chooser .dh-chooser__scroll{padding:24px max(16px,env(safe-area-inset-right,0px)) calc(22px + env(safe-area-inset-bottom,0px)) max(16px,env(safe-area-inset-left,0px))}
  .dh-chooser .dh-chooser__close{top:12px;right:max(12px,env(safe-area-inset-right,0px))}
  .dh-chooser .dh-chooser__head{text-align:left;padding:0 52px 0 2px}
  .dh-chooser .dh-chooser__title{font-size:clamp(34px,10vw,40px)}
  .dh-chooser .dh-chooser__line{display:block}
  .dh-chooser .dh-chooser__sub{margin:10px 0 0;font-size:15px}
  .dh-chooser .dh-chooser__cards{gap:14px;margin-top:20px}
  .dh-chooser .dh-chooser__card{padding:18px 18px 18px;row-gap:9px;border-radius:18px}
  .dh-chooser .dh-chooser__ctitle{font-size:clamp(30px,9vw,36px)}
  .dh-chooser .dh-chooser__icon{width:clamp(50px,15vw,60px)}
  .dh-chooser .dh-chooser__copy{font-size:14.5px}
  .dh-chooser .dh-chooser__list li{font-size:14px}
  .dh-chooser .dh-chooser__hint{margin-top:16px;padding:13px 15px;font-size:14px}
}

/* closing: quick fade/drop, then JS sets [hidden] */
/* the dialog ignores clicks while it fades; the backdrop stays to catch them so nothing reaches the page underneath */
.dh-chooser.is-closing .dh-chooser__dialog{pointer-events:none}
.dh-chooser.is-closing .dh-chooser__backdrop{animation:dh-pp-fade-out .24s ease forwards}
.dh-chooser.is-closing .dh-chooser__dialog{animation:dh-pp-drop .24s ease-in forwards}
@media (max-width:575.98px){
  .dh-chooser.is-closing .dh-chooser__backdrop{animation:dh-pp-fade-out .28s cubic-bezier(.4,0,1,1) forwards}
  .dh-chooser.is-closing .dh-chooser__dialog{animation:dh-pp-sheet-out .28s cubic-bezier(.4,0,1,1) forwards}
}

/* hover only for real pointers, so phones never get stuck in a hover state */
@media (hover:hover) and (pointer:fine){
  .dh-pcta:hover,.dh-pcta.dh-pcta:hover{transform:translateY(-2px);box-shadow:0 20px 34px -16px rgba(11,59,53,.85)!important}
  .dh-pcta.dh-pcta:active{transform:translateY(-1px) scale(.99)}
  .dh-pcta:hover::after{opacity:1;transform:translateX(100%);transition:transform .8s cubic-bezier(.45,0,.55,1),opacity .1s}
  .dh-pcta:hover .dh-pcta__btn{background:var(--dh-yellow);color:var(--dh-green)}
  .dh-pcta:hover .dh-pcta__btn svg{transform:translateX(3px)}
  .dh-chooser .dh-chooser__card:hover{transform:translateY(-5px);box-shadow:0 22px 44px rgba(0,0,0,.3);border-color:var(--dh-yellow-hi)}
  .dh-chooser .dh-chooser__card:hover::after{opacity:1;transform:translateX(100%);transition:transform .8s cubic-bezier(.45,0,.55,1),opacity .1s}
  .dh-chooser .dh-chooser__card:hover .dh-chooser__cta{text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:2px}
  .dh-chooser .dh-chooser__card:hover .dh-chooser__cta svg{transform:translateX(5px)}
  .dh-chooser .dh-chooser__card:hover .dh-chooser__icon{transform:scale(1.07) rotate(-3deg)}
  .dh-chooser .dh-chooser__close:hover{background:var(--dh-yellow);color:var(--dh-green);transform:rotate(90deg)}
}
.dh-pcta:active{transform:scale(.99)}

@keyframes dh-pp-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}
@keyframes dh-pp-fade{from{opacity:0}}
@keyframes dh-pp-fade-out{to{opacity:0}}
@keyframes dh-pp-rise{from{opacity:0;transform:translateY(28px) scale(.97)}}
@keyframes dh-pp-drop{to{opacity:0;transform:translateY(16px) scale(.98)}}
@keyframes dh-pp-sheet{from{transform:translateY(100%)}}
@keyframes dh-pp-sheet-out{to{transform:translateY(100%)}}
@keyframes dh-pp-pop{from{opacity:0;transform:translateY(18px) scale(.97)}}
@keyframes dh-pp-line{from{transform:translateY(105%)}}

@media (prefers-reduced-motion:reduce){
  .dh-pcta,.dh-pcta *,.dh-pcta::after,.dh-chooser,.dh-chooser *,.dh-chooser *::before,.dh-chooser *::after{animation:none!important;transition:none!important}
  .dh-pcta:hover,.dh-pcta:active,.dh-pcta.dh-pcta:hover,.dh-pcta.dh-pcta:active,.dh-chooser .dh-chooser__card:hover,.dh-chooser .dh-chooser__card:hover .dh-chooser__icon,.dh-chooser .dh-chooser__close:hover{transform:none}
}