/*
Theme Name: Fistook Art
Template: kli
Description: Fistook Art on the shared storefront core (the "kli" theme). CSS for this store only goes below; it loads after the core's.
Version: 1.0.0
*/

/* ---------- fonts: Chillax (headlines) + Synonym (text), Fontshare, ITF Free Font License: commercial use and self-hosting allowed;
   the files stay exactly as Fontshare serves them (no subsetting or conversion) and only on this store's site ---------- */
@font-face{ font-family:'Chillax'; src:url(assets/fonts/chillax-500.woff2) format('woff2'); font-weight:500; font-display:swap; }
@font-face{ font-family:'Chillax'; src:url(assets/fonts/chillax-600.woff2) format('woff2'); font-weight:600; font-display:swap; }
@font-face{ font-family:'Synonym'; src:url(assets/fonts/synonym-400.woff2) format('woff2'); font-weight:400; font-display:swap; }
@font-face{ font-family:'Synonym'; src:url(assets/fonts/synonym-500.woff2) format('woff2'); font-weight:500; font-display:swap; }
@font-face{ font-family:'Synonym'; src:url(assets/fonts/synonym-700.woff2) format('woff2'); font-weight:700; font-display:swap; }

/* ---------- logo: the paper pistachio instead of the core's bowl ---------- */
.logo .logo-mark{ width:1.85em; height:1.1em; background:url(assets/pistachio.png) center / contain no-repeat; }
.logo .logo-mark > *{ display:none; }

/* ---------- footer: no WhatsApp or Instagram yet (the "WhatsApp" link points at the email), the contact column carries them ---------- */
.ftr-grid li:has(> a[rel="noopener"]:is([href=""], [href^="mailto:"])){ display:none; }
.ftr-grid > *{ min-width:0; }
.ftr-grid a[href^="mailto:"]{ overflow-wrap:anywhere; } /* the email address must not widen a phone's footer */
.ftr ul li:has(> br){ flex-direction:column; align-items:flex-start; } /* the contact line holds several links, one under the other */
.ftr ul li > br{ display:none; }

/* no free-shipping threshold on this store (Printful and Art of Where rates): the cart says where shipping is worked out, without a progress bar */
.ship-bar .ship-track{ display:none; }

/* links inside running text read as links */
/* she gave no numbers for the studio section (her home page had none): no empty line above nothing */
.facts:empty{ display:none; }

:is(.fa p, .fa li, .fa-legal, .acc .a, .faq-side .lead, .studio-card p, .tip p) a:not(.btn, .link-arr){ text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:3px; }

/* home: collages sit whole on white, not cropped */
.blk-gallery .blk-strip figure{ background:#fff; outline:1px solid var(--line); outline-offset:-1px; }
.blk-gallery .blk-strip img{ object-fit:contain; padding:var(--s24); }
.blk-banner .blk-img{ background:#fff; }
.blk-banner .blk-img img{ object-fit:contain; padding:var(--s24); }

/* ---------- the store's pages (seed/pages.php): .fa inside the core's .prose ---------- */
.prose:has(> .fa){ max-width:none; }
.fa{ --fa-gap:clamp(56px, 4rem + 3vw, 120px); padding-bottom:var(--s24); }
.fa > * + *{ margin-top:var(--fa-gap); }
.fa > .fa-lead + *{ margin-top:var(--s56); }
.fa h2{ margin:0; font-size:var(--fs-h2); line-height:1.2; }
.fa h3{ margin:0 0 var(--s12); }
.fa figure{ margin:0; }
.fa img{ display:block; }
.fa-lead{ margin-top:calc(-1 * var(--s24)); font-size:clamp(18px, 1rem + .45vw, 22px); line-height:1.5; color:var(--muted); max-width:52ch; }
.fa-h{ margin-bottom:var(--s32) !important; }

.fa-split{ display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:var(--s40) clamp(40px, 5vw, 96px); align-items:center; }
.fa-split.fa-top{ align-items:start; }
.fa-split.is-flip > :first-child{ order:2; }
.fa-text{ max-width:var(--w-measure); }
.fa-text h2{ margin-bottom:var(--s20); }
.fa-text p + p, .fa-text ul + p, .fa-text p + ul{ margin-top:var(--s16); }

.fa-img{ border-radius:var(--r-img); overflow:hidden; background:var(--photo-bg); aspect-ratio:4 / 3; }
.fa-img img{ width:100%; height:100%; object-fit:cover; }
.fa-img.fa-tall{ aspect-ratio:4 / 5; }
.fa-img.is-art{ background:#fff; outline:1px solid var(--line); outline-offset:-1px; aspect-ratio:auto; }
.fa-img.is-art img{ height:auto; object-fit:contain; padding:clamp(12px, 2.5vw, 32px); }

.fa-trio{ display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:var(--gap-gallery); }
.fa > section > .fa-trio, .fa-step > .fa-trio, .fa-step > .fa-box{ margin-top:var(--s40); }
.fa-works figure .fa-img{ aspect-ratio:4 / 5; display:grid; place-items:center; }
.fa-works figure .fa-img img{ max-height:100%; width:auto; max-width:100%; }
.fa-works figcaption{ margin-top:var(--s12); font-weight:700; }

/* tinted panels: a list of tags, a short version, a call to action */
.fa-box{ background:var(--surface); border-radius:var(--r-card); padding:clamp(24px, 3vw, 48px); }
.fa-box p{ margin-top:var(--s16); }
.fa-tags{ list-style:none; margin:var(--s16) 0 0; padding:0; display:flex; flex-wrap:wrap; gap:var(--s8); }
.fa-tags li{ background:var(--bg); border:1px solid var(--line); border-radius:var(--r-control); padding:6px var(--s16); font-size:15px; }
.fa-cta{ background:var(--surface); border-radius:var(--r-card); padding:clamp(40px, 5vw, 80px) var(--s24); text-align:center; }
.fa-cta p{ margin:var(--s12) auto 0; color:var(--muted); max-width:52ch; }
.fa-btns{ display:flex; flex-wrap:wrap; gap:var(--s12); margin-top:var(--s28) !important; }
.fa-cta .fa-btns{ justify-content:center; }

/* jump links at the top of long pages */
.fa-jump{ display:flex; flex-wrap:wrap; gap:var(--s8); }
.fa-jump a{ min-height:44px; display:inline-flex; align-items:center; padding:0 var(--s20); border:1px solid var(--line); border-radius:var(--r-control); font-size:15px; transition:border-color var(--t-text) var(--ease); }
@media (hover:hover) and (pointer:fine){ .fa-jump a:hover{ border-color:var(--ink); } }
.fa section[id]{ scroll-margin-top:calc(var(--header-h) + var(--s24)); }

/* about */
.fa-name{ display:grid; gap:var(--s32); }
.fa-name .fa-text{ max-width:var(--w-head); }
.fa .fa-quote{ max-width:880px; margin-inline:auto; }
.fa-quote img{ width:100%; height:auto; }

/* contact and commission: the form */
.fa-form-box{ background:var(--surface); border-radius:var(--r-card); padding:clamp(24px, 3vw, 48px); }
.fa-form .field{ background:var(--bg); width:100%; }
.fa-form select.field{ appearance:none; padding-inline-end:var(--s48); cursor:pointer;
  background:var(--bg) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232B1D2C' stroke-width='1.5'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 16px center / 18px; }
[dir="rtl"] .fa-form select.field{ background-position:left 16px center; }
.fa-form textarea.field{ min-height:180px; padding-block:14px; line-height:1.5; resize:vertical; }
.fa-form .btn{ margin-top:var(--s8); }
.fa-form-note{ margin-top:var(--s16); min-height:24px; font-size:15px; }
.fa-form-note.is-bad{ color:var(--error); }
.fa-hp{ position:absolute; inset-inline-start:-9999px; width:1px; height:1px; overflow:hidden; }
.fa-aside{ display:grid; gap:var(--s32); }
.fa-aside .fa-img{ max-width:320px; }
.fa-list{ list-style:none; margin:0; padding:0; display:grid; gap:var(--s20); }
.fa-list li{ display:grid; gap:2px; padding-bottom:var(--s20); border-bottom:1px solid var(--line); }
.fa-list b{ font-size:15px; }

.fa-ticks{ list-style:none; margin:0; padding:0; display:grid; gap:var(--s12); }
.fa-ticks li{ position:relative; padding-inline-start:var(--s32); }
.fa-ticks li::before{ content:""; position:absolute; inset-inline-start:0; top:.45em; width:16px; height:10px; border-radius:50%; background:var(--clay); box-shadow:inset 0 -3px 0 var(--clay-deep); } /* a tiny pistachio */

.fa-steps{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:var(--gap-cards); counter-reset:fa; }
.fa-steps li{ counter-increment:fa; border-top:1px solid var(--ink); padding-top:var(--s20); display:grid; gap:var(--s8); align-content:start; }
.fa-steps li::before{ content:counter(fa, decimal-leading-zero); font-size:14px; color:var(--muted); }
.fa-steps b{ font-size:var(--fs-h3); }
.fa-steps span{ color:var(--muted); }

/* gallery: columns of whole pictures */
.fa-masonry{ columns:3 260px; column-gap:var(--gap-gallery); }
.fa-masonry figure{ break-inside:avoid; margin:0 0 var(--gap-gallery); border-radius:var(--r-img); overflow:hidden; background:var(--photo-bg); }
.fa-masonry img{ width:100%; height:auto; }
.fa-masonry.is-art figure{ background:#fff; outline:1px solid var(--line); outline-offset:-1px; }
.fa-masonry.is-art img{ padding:clamp(12px, 2vw, 28px); }

/* materials & process */
.fa-num{ display:block; margin-bottom:var(--s12); font-size:14px; font-weight:700; letter-spacing:.08em; color:var(--clay); }
.fa-note{ font-size:15px; color:var(--muted); border-inline-start:3px solid var(--clay); padding-inline-start:var(--s16); }

/* FAQ */
.fa-faq-group{ display:grid; grid-template-columns:minmax(0, 1fr) minmax(0, 2fr); gap:var(--s24) var(--s64); align-items:start; }
.fa-faq-group h2{ position:sticky; top:calc(var(--header-h) + var(--s24)); }

/* legal and policy pages: a reading column, summary cards on top */
.fa-doc{ max-width:var(--w-wide); }
.fa-doc .fa-cta{ text-align:start; }
.fa-doc .fa-cta p{ margin-inline:0; }
.fa-doc .fa-cta .fa-btns{ justify-content:flex-start; }
.fa-legal h2{ margin:var(--s48) 0 var(--s12); font-size:22px; }
.fa-legal > h2:first-child{ margin-top:0; }
.fa-legal p + p, .fa-legal ul + p, .fa-legal ol + p, .fa-legal p + ul, .fa-legal p + ol{ margin-top:var(--s16); }
.fa-legal ul, .fa-legal ol, .fa-short ul{ margin:var(--s12) 0 0; padding-inline-start:1.25em; display:grid; gap:var(--s8); }
.fa-short h2{ font-size:20px; }
.fa-cards{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(auto-fit, minmax(180px, 1fr)); gap:var(--s12); }
.fa-cards li{ background:var(--surface); border-radius:var(--r-card); padding:var(--s24); font-size:15px; color:var(--muted); display:grid; gap:var(--s8); align-content:start; }
.fa-cards b{ font-size:var(--fs-h2); line-height:1.1; color:var(--ink); }

@media (max-width:1023px){
  .fa-steps{ grid-template-columns:1fr; }
  .fa-faq-group{ grid-template-columns:1fr; }
  .fa-faq-group h2{ position:static; }
}
@media (max-width:767px){
  .fa-split{ grid-template-columns:1fr; }
  .fa-split.is-flip > :first-child{ order:0; }
  .fa-trio{ grid-template-columns:1fr 1fr; }
  .fa-trio > :last-child:nth-child(odd){ grid-column:1 / -1; }
  .fa-works{ grid-template-columns:1fr; }
  .fa-works > :last-child:nth-child(odd){ grid-column:auto; }
  .fa-btns .btn{ flex:1 1 100%; }
  .fa-aside .fa-img{ max-width:200px; }
}