/* Plugins catalogue · page specific
   fdesign.com.gr

   Load AFTER fdesign-landing-core.css. Almost everything comes from there:
   tokens, .wrap, typography, .eyebrow, .lead, .sec-head, buttons, section
   shells, .cost-grid for the services band, .final for the closing CTA.

   What is here is the catalogue itself, which core had no shape for.

   Built for one product without looking like it is waiting for more. The grid
   is auto-fit, so a second and third plugin drop into columns with no change
   here; the card carries its own two column layout, which is what stops a
   single entry reading as a lonely tile in an empty row.

   Wrap the markup in <div class="fdsec">.
*/

.fdsec .catalogue{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,420px),1fr));gap:1.6rem}

/* The card. Mark on the left, everything else on the right; it collapses to a
   single column below the point where the two columns stop having room. */
.fdsec .product{display:grid;grid-template-columns:auto 1fr;gap:clamp(1.4rem,3vw,2.4rem);align-items:start;background:var(--paper-2);border:1px solid var(--paper-line);border-radius:10px;padding:clamp(1.6rem,3vw,2.2rem)}
@media(max-width:680px){.fdsec .product{grid-template-columns:1fr;gap:1.2rem}}

/* The mark repeats the plugin's directory icon: ink plate, red return arrow.
   Drawn in CSS rather than shipped as an image so it stays sharp and costs
   nothing; the arc is a bordered half circle, the head a rotated square. */
.fdsec .product .mark{width:84px;height:84px;border-radius:18px;background:var(--ink);position:relative;flex:none}
.fdsec .product .mark::before{content:"";position:absolute;left:22px;top:26px;width:40px;height:20px;border:5px solid var(--brand);border-bottom:0;border-radius:22px 22px 0 0}
.fdsec .product .mark::after{content:"";position:absolute;left:14px;top:42px;width:15px;height:15px;background:var(--brand);clip-path:polygon(50% 100%,0 0,100% 0)}

.fdsec .product h3{margin:0 0 .5rem;font-size:1.45rem}
.fdsec .product h3 a{color:inherit}
.fdsec .product h3 a:hover{color:var(--brand)}
.fdsec .product .what{color:var(--fg-soft);font-size:.98rem;margin:0 0 1.1rem;max-width:58ch}

/* The facts row. Deliberately short: a catalogue entry answers "is this for
   me", the product page answers everything else. */
.fdsec .product .facts{display:flex;flex-wrap:wrap;gap:.5rem;margin:0 0 1.3rem;padding:0;list-style:none}
.fdsec .product .facts li{font-family:var(--f-mono);font-size:.7rem;letter-spacing:.06em;text-transform:uppercase;color:var(--fg-soft);border:1px solid var(--paper-line);border-radius:20px;padding:.28rem .75rem}

.fdsec .product .foot{display:flex;flex-wrap:wrap;align-items:center;gap:1rem}
.fdsec .product .cost{font-family:var(--f-display);font-weight:700;font-size:1.3rem;color:var(--fg);background:none;padding:0;line-height:1}
.fdsec .product .cost span{font-family:var(--f-mono);font-weight:400;font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;color:var(--fg-soft);margin-left:.5rem}

/* Empty state. Not decoration: a catalogue with one entry should say what the
   second will be, or admit there is nothing scheduled, rather than leave the
   reader guessing whether the page is finished. */
.fdsec .catalogue-note{margin-top:1.6rem;font-family:var(--f-mono);font-size:.76rem;color:var(--fg-soft);letter-spacing:.03em;line-height:1.8}

.fdsec .section-paper{background:var(--paper)}