/* ===========================================================================
   The gift certificate — the restaurant's own paper certificate.

   White card, the numbered stub on the left (the number in red, "Briarpatch
   Restaurants / GIFT CERTIFICATES" in bold Times, To / From / Date and a
   blank line), and the certificate proper: ivy line work round the edges and
   the grey ivy hanging top right, "Date", the logo and "The Tradition
   Continues", the handwritten lines, "Given by:", the number in red. Every
   position is the paper's, measured off the original; every size is in
   container units of the card itself, so it scales like the printed card —
   the same markup is the builder's live preview, the home page's showcase, a
   thumbnail and an 11-inch print.

   Loaded on the site, on the printable page and in wp-admin.
   =========================================================================== */

/* the paper's handwriting, bundled with the theme (OFL): a printed
   certificate never waits on a font service, nor falls back to a wider hand */
@font-face{font-family:"Oooh Baby";src:url("../fonts/OoohBaby-Regular.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}

.cert{
  --paper:#FFFFFF;--ink:#4F4F52;--ink-2:#2B2B2E;--rule:#5E5E62;--serial:#C0473F;
  container-type:inline-size;position:relative;width:100%;color:var(--ink);
  font-family:var(--font-cert);line-height:1.15;text-align:left;
  -webkit-print-color-adjust:exact;print-color-adjust:exact;
}
.cert *{-webkit-print-color-adjust:exact;print-color-adjust:exact}

.cert-in{
  position:relative;display:grid;grid-template-columns:1fr;aspect-ratio:1080 / 800;overflow:hidden;
  background:var(--paper);border-radius:.25cqw;
  box-shadow:0 1.6cqw 3.6cqw -1.8cqw rgba(20,20,30,.45),0 .3cqw .8cqw -.3cqw rgba(20,20,30,.25),inset 0 0 0 1px rgba(0,0,0,.05);
}
.cert.has-stub .cert-in{grid-template-columns:28% 1fr;aspect-ratio:1500 / 800}

/* --------------------------------------------------------------- the stub */

.cert-stub{position:relative;background:var(--paper);color:var(--ink-2)}
/* the perforation down its right edge */
.cert-stub::after{
  content:"";position:absolute;top:0;bottom:0;right:0;width:1px;
  background:repeating-linear-gradient(to bottom,rgba(0,0,0,.28) 0 .35cqw,transparent .35cqw .7cqw);
}
.cert-stub > *{position:absolute;margin:0}
.cert-serial{
  font-family:"Courier New",Courier,ui-monospace,monospace;font-weight:400;color:var(--serial);letter-spacing:.06em;white-space:nowrap;
}
.cert-stub .cert-serial{left:0;right:0;top:7.4%;text-align:center;font-size:1.55cqw}
.cert-stub-title{left:9.4%;right:4%;top:19.5%;display:grid;font-size:2.12cqw;line-height:1.16;color:var(--ink-2)}
.cert-stub-title b{font-weight:700;white-space:nowrap}
.cert-stub-line{left:4%;right:10%;display:flex;align-items:flex-end;gap:.5cqw;font-size:2cqw;line-height:1;color:var(--ink-2)}
.cert-stub-line:nth-of-type(3){top:43.4%}
.cert-stub-line:nth-of-type(4){top:51.6%}
.cert-stub-line:nth-of-type(5){top:59.8%}
.cert-stub-line.is-blank{top:69%;left:1.5%}
.cert-stub-line span{flex:none}
.cert-stub-line b{
  flex:1;min-width:0;height:1.25em;border-bottom:1px solid var(--rule);overflow:hidden;white-space:nowrap;text-overflow:ellipsis;
  font-family:var(--font-hand);font-weight:400;font-size:1.25em;line-height:1;padding-left:.3em;color:var(--ink-2);
}

/* -------------------------------------------------------- the certificate */

.cert-main{position:relative;container-type:inline-size;background:var(--paper)}
.cert-main > *{position:absolute;margin:0;z-index:1}
.cert-ivy{left:0;top:0;width:100%;height:100%;z-index:0;pointer-events:none}
/* the hanging ivy (inc/certificates: one image, ivy-clump.webp, to swap for the original art) */
.cert-clump{left:74.07%;top:0;width:25.93%;height:50%;z-index:0;pointer-events:none;object-fit:fill}

/* positions and sizes off a straightened photo of the paper: the lines are
   41px Oooh Baby on the 1080px card (3.8cqi), "Date" 36px, set on the paper's
   baselines (top = baseline - .7875em, the font's line box at line-height 1) */
.cert-date{left:13.9%;top:28.3%;display:flex;align-items:flex-end;gap:.55cqi;font-family:var(--font-hand);font-size:3.35cqi;line-height:1;color:var(--ink)}
.cert-date b{
  display:inline-block;min-width:9.3cqi;height:1.05em;margin-bottom:.35cqi;padding:0 .5cqi;border-bottom:1px solid var(--rule);
  font-weight:400;font-size:.82em;line-height:1.05;white-space:nowrap;text-align:center;color:var(--ink-2);
}

.cert-brand{left:38%;right:38%;top:16%;display:grid;justify-items:center;text-align:center}
.cert-logo{width:62%;height:auto;filter:grayscale(1) contrast(1.05)}
.cert-tag{margin:.1cqi 0 0;font-family:var(--font-cert);font-size:2.9cqi;line-height:.71;color:#5D5D61;white-space:nowrap}

.cert-line{left:11.85%;font-family:var(--font-hand);font-size:3.8cqi;line-height:1;color:var(--ink);white-space:nowrap}
.cert-line-1{top:44.96%;right:11.57%;display:flex;align-items:flex-end}
.cert-line-2{top:53.71%;left:11.3%;word-spacing:-.04em}
.cert-rule{top:70.59%;word-spacing:-.04em}
.cert-given{top:78.71%;left:11.3%;right:12.78%;display:flex;align-items:flex-end;gap:.93cqi}
.cert-blank{
  display:inline-block;height:1.08em;border-bottom:1px solid var(--rule);
  font-weight:400;font-size:.9em;line-height:1.12;white-space:nowrap;overflow:hidden;text-align:center;color:var(--ink-2);
}
.cert-blank-to{flex:0 0 26.5cqi;margin:0 .4cqi 0 2.5cqi}
.cert-toa{flex:none}
.cert-blank-amt{flex:1 1 auto;min-width:6cqi}
.cert-blank-from{flex:1 1 auto;margin-bottom:.3cqi}
.cert-main .cert-serial-main{left:0;right:0;top:91.7%;text-align:center;font-size:2.35cqi}

/* redeemed or void: a rubber stamp across it */
.cert-stamp{
  left:50%;top:50%;transform:translate(-50%,-50%) rotate(-14deg);padding:1cqi 3cqi;border:.55cqi solid #B3263E;border-radius:1cqi;
  font-family:var(--font-display);font-stretch:var(--stretch-display);font-size:11cqi;font-weight:700;line-height:1;text-transform:uppercase;letter-spacing:.06em;
  color:#B3263E;opacity:.75;mix-blend-mode:multiply;z-index:3;
}

/* a certificate shown small (the cart, the thank-you page) */
.cert-thumb{max-width:320px}

/* the giver's note, on its own card under a printed certificate */
.cert-note{max-width:640px;margin:0 auto;padding:1.2rem 1.6rem;background:#fff;border:1px solid rgba(0,0,0,.1);box-shadow:0 10px 30px -18px rgba(0,0,0,.4);text-align:center}
.cert-note-k{margin:0 0 .3rem;font-family:var(--font-text);font-size:.72rem;font-weight:800;letter-spacing:.18em;text-transform:uppercase;color:#6B6B70}
.cert-note-t{margin:0;font-family:var(--font-hand);font-size:2.2rem;line-height:1.15;color:#2B2B2E}

/* ---------------------------------------------------- the home showcase */

.bp .cert-stack{position:relative;aspect-ratio:1080 / 940;max-width:720px;margin-inline:auto}
.bp .cert-stack > .cert{position:absolute;width:88%;transition:transform .7s var(--ease-out)}
.bp .cert-stack-back{right:0;top:0;transform:rotate(5deg)}
.bp .cert-stack-front{left:0;bottom:0;transform:rotate(-4deg)}
@media (hover:hover){
  .bp .cert-stack:hover .cert-stack-back{transform:rotate(8deg) translate(3%,-3%)}
  .bp .cert-stack:hover .cert-stack-front{transform:rotate(-6deg) translate(-3%,3%)}
}

/* ------------------------------------------------------------ the builder */

.bp .cb{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:clamp(1.6rem, 1rem + 3vw, 4.4rem);align-items:start}
.bp .cb-preview{position:sticky;top:calc(var(--header-h) + var(--wp-admin--admin-bar--height, 0px) + 1.4rem)}
.bp .cb-preview-in{padding:clamp(1rem, .6rem + 1.8vw, 2.4rem);border-radius:var(--r);background:#E9E2D4 radial-gradient(80% 70% at 50% 30%,rgba(255,255,255,.55),rgba(255,255,255,0));border:1px solid var(--line)}
.bp .cb-preview .cert{transition:transform .5s var(--ease-out)}
.bp .cb-preview-note{display:flex;align-items:center;gap:.5rem;margin:1.1rem 0 0;font-size:.88rem;font-weight:600;color:var(--muted)}
.bp .cb-preview-note .ico{color:var(--leaf);width:18px;height:18px}
.bp .cb-form-wrap{min-width:0}
.bp .cb-form{display:grid;gap:1.5rem}
.bp .cb-step{margin:0;padding:0;border:0;min-width:0}
.bp .cb-legend{display:flex;align-items:center;gap:.7rem;margin:0 0 .9rem;padding:0;font-family:var(--font-display);font-stretch:var(--stretch-display);font-size:1.75rem;font-weight:500;line-height:1;text-transform:uppercase;color:var(--navy)}
.bp .cb-num{display:grid;place-items:center;width:34px;height:34px;flex:none;border-radius:50%;background:var(--navy);color:var(--cream);font-family:var(--font-text);font-stretch:100%;font-size:.86rem;font-weight:800}

.bp .cb-amount input,.bp .cb-delivery input{position:absolute;opacity:0;width:1px;height:1px}
.bp .cb-amount:has(input:focus-visible),.bp .cb-delivery:has(input:focus-visible){outline:2px solid var(--navy);outline-offset:2px}

.bp .cb-amounts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.5rem}
.bp .cb-amount{position:relative;cursor:pointer}
.bp .cb-amount span{display:grid;place-items:center;height:58px;border-radius:var(--r-sm);border:1px solid var(--line-strong);background:var(--white);
  font-family:var(--font-display);font-stretch:var(--stretch-display);font-size:1.9rem;font-weight:500;color:var(--navy);transition:all .2s var(--ease)}
.bp .cb-amount:hover span{border-color:var(--navy)}
.bp .cb-amount input:checked + span{background:var(--navy);border-color:var(--navy);color:var(--cream);box-shadow:var(--shadow-1)}

.bp .cb-grid{display:grid;grid-template-columns:1fr 1fr;gap:.9rem}
.bp .cb-field{position:relative;display:grid;gap:.4rem;margin:0}
.bp .cb-field-wide{grid-column:1 / -1}
.bp .cb-field label{font-size:.74rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--navy)}
.bp .cb-field abbr{color:var(--rose)}
.bp .cb-count{position:absolute;right:.7rem;bottom:.55rem;font-size:.74rem;color:var(--muted)}
.bp .cb-help{font-size:.85rem;color:var(--muted)}

.bp .cb-deliveries{display:grid;grid-template-columns:1fr 1fr;gap:.6rem}
.bp .cb-delivery{position:relative;display:grid;grid-template-columns:auto 1fr;gap:.75rem;align-items:center;padding:.85rem .9rem;border-radius:var(--r-sm);border:1px solid var(--line-strong);background:var(--white);cursor:pointer;transition:border-color .2s var(--ease),box-shadow .2s var(--ease)}
.bp .cb-delivery-ico{display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:var(--linen);color:var(--navy)}
.bp .cb-delivery-ico .ico{width:20px;height:20px}
.bp .cb-delivery-t{display:grid;gap:.05rem;line-height:1.25}
.bp .cb-delivery-t strong{font-size:.92rem;color:var(--navy)}
.bp .cb-delivery-t small{font-size:.76rem;color:var(--muted)}
.bp .cb-delivery:has(input:checked){border-color:var(--rose);box-shadow:0 0 0 2px var(--rose)}
.bp .cb-delivery:has(input:checked) .cb-delivery-ico{background:var(--rose);color:var(--white)}
.bp .cb-when{margin-top:.9rem}
.bp .cb-when-mail textarea{background:var(--white)}
.bp .cb-when-pickup .cb-help{display:block;padding:.75rem .9rem;border-radius:var(--r-sm);background:var(--linen);color:var(--ink-2)}
/* with the script, only the chosen delivery's field shows; without it, both do */
html.js .bp .cb-when{display:none}
html.js .bp .cb-when.is-on{display:grid}

.bp .cb-total{display:flex;flex-wrap:wrap;align-items:center;gap:1rem 1.4rem;padding:1.1rem 1.2rem;border-radius:var(--r-sm);background:var(--navy) var(--damask) center / cover;color:var(--on-dark)}
.bp .cb-qty{display:grid;gap:.35rem}
.bp .cb-qty label{font-size:.68rem;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--brass-hi)}
.bp .qty-stepper{display:inline-flex;align-items:center;justify-self:start;border-radius:var(--r-sm);background:var(--cream);overflow:hidden}
.bp .qty-stepper input{width:3.2rem;min-height:44px;padding:0;border:0;border-radius:0;text-align:center;font-weight:800;-moz-appearance:textfield;appearance:textfield}
.bp .qty-stepper input::-webkit-outer-spin-button,.bp .qty-stepper input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.bp .qty-btn{width:40px;height:44px;border:0;background:transparent;color:var(--navy);font-size:1.25rem;font-weight:700;cursor:pointer}
.bp .qty-btn:hover{background:var(--linen)}
.bp .cb-sum{display:grid;margin:0 auto 0 0;line-height:1}
.bp .cb-sum span{font-size:.68rem;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--brass-hi)}
.bp .cb-sum b{font-family:var(--font-display);font-stretch:var(--stretch-display);font-size:2.6rem;font-weight:500;color:var(--cream)}
.bp .cb-ship{font-size:.74rem;font-weight:600;color:var(--on-dark-2)}
.bp .cb-ship[hidden]{display:none}
.bp .cb-submit{flex:1 1 220px}
.bp .cb-note{margin:0;font-size:.88rem;color:var(--muted)}
.bp .cb-notices .woocommerce-error,.bp .cb-notices .woocommerce-message,.bp .cb-notices .woocommerce-info{margin:0 0 1.2rem;padding:1rem 1.2rem;list-style:none;border-radius:var(--r-sm);background:var(--rose-soft);color:var(--rose-ink);border:1px solid rgba(164,34,56,.3)}
.bp .cb-off{padding:2rem;border-radius:var(--r-sm);background:var(--white);border:1px solid var(--line);box-shadow:var(--shadow-1)}
.bp .cb-title{font-size:2rem;text-transform:uppercase;color:var(--navy)}

@media (max-width:1100px){
  .bp .cb{grid-template-columns:1fr}
  .bp .cb-preview{position:relative;top:auto}
}
@media (max-width:560px){
  .bp .cb-deliveries,.bp .cb-grid{grid-template-columns:1fr}
  .bp .cb-amounts{grid-template-columns:repeat(3,minmax(0,1fr))}
  /* the quantity and the total on one line, the button its own full width
     under them (as a stacked flex item its 220px basis became its height) */
  .bp .cb-total{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:end;gap:1rem}
  .bp .cb-sum{margin:0;justify-items:end;text-align:right}
  .bp .cb-submit{grid-column:1 / -1;width:100%}
}

/* ---------------------------------------- the thank-you page's certificates */

.bp .cert-ready{margin:2.4rem 0;padding:clamp(1.2rem, .8rem + 2vw, 2.2rem);border-radius:var(--r-sm);background:var(--white);border:1px solid var(--line);box-shadow:var(--shadow-1)}
.bp .cert-ready-title{font-size:2.2rem;text-transform:uppercase;color:var(--navy)}
.bp .cert-ready-list{list-style:none;margin:0 0 1rem;padding:0;display:grid;gap:1.2rem}
.bp .cert-ready-item{display:grid;grid-template-columns:minmax(0,300px) 1fr;gap:1.4rem;align-items:center}
.bp .cert-ready-body p{margin:0 0 .3rem}
.bp .cert-ready-no{font-family:"Courier New",ui-monospace,monospace;font-weight:700;color:var(--rose)}
.bp .cert-ready-who{font-family:var(--font-display);font-stretch:var(--stretch-display);font-size:1.7rem;font-weight:500;text-transform:uppercase;color:var(--navy)}
.bp .cert-ready-how{font-size:.92rem;color:var(--ink-2)}
.bp .cert-ready-msg{margin:.5rem 0 0;padding:.6rem .9rem;border-left:3px solid var(--rose);background:var(--linen);font-family:var(--font-display);font-stretch:var(--stretch-italic);font-style:italic;color:var(--ink)}
@media (max-width:600px){ .bp .cert-ready-item{grid-template-columns:1fr} }
.bp-cart-cert{width:120px;height:auto;border-radius:3px;box-shadow:var(--shadow-1)}