/* E-Commerce / WooCommerce · page specific
   fdesign.com.gr

   Load AFTER fdesign-landing-core.css. Holds only what this page adds on top
   of the shared foundation:

   .section-paper light grey band behind what every e-shop includes.
   .compare       Shopify against WooCommerce. Under 640px each row becomes a
                  block and the column names move into data-label.
                  Same rules as on the other service pages; they stay in the
                  page files because one page has its own .compare.
   .xp-col        the two lists inside the "Built and running" .case.
   .case-links    the line of portfolio links under those lists.
   .plans.pair    the second pricing family, four plans as two by two.

   Also here: a visible style for links inside paragraphs, because core resets
   every link, the light background overrides for the plan family heading and
   the VAT note, which core colours for dark sections, and the FAQ heading
   centred as on the other service pages.

   From core: .findings and .verdict in the hero check, .define and .fit,
   .money with .cost-list and .tally, .step-link, .book-routes, .pricing-note.

   Author: Doeri, https://fdesign.com.gr
*/

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

/* Links inside running text ------------------------------------------------ */
.fdsec p > a:not(.btn){color:var(--brand-deep);border-bottom:1px solid currentColor;transition:color .15s ease}
.fdsec p > a:not(.btn):hover{color:var(--brand)}
.fdsec .case p > a:not(.btn),
.fdsec .section-ink p > a:not(.btn){color:#fff;border-bottom-color:var(--brand)}
.fdsec .case p > a:not(.btn):hover,
.fdsec .section-ink p > a:not(.btn):hover{color:var(--brand)}
/* The source links keep the teal core gives them. */
.fdsec .section-ink p.sources > a:not(.btn){color:var(--secure);border-bottom-color:rgba(52,167,155,.3)}
.fdsec .section-ink p.sources > a:not(.btn):hover{color:#fff}

/* What every e-shop includes: six cards as two rows of three --------------- */
.fdsec #included .cost-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:900px){.fdsec #included .cost-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.fdsec #included .cost-grid{grid-template-columns:minmax(0,1fr)}}

/* The honest callout sits under the cards, with room to breathe. */
.fdsec #included .callout{margin-top:clamp(1.8rem,3vw,2.5rem)}

/* The 2026 rules: six text-heavy cards read better two by two ------------- */
.fdsec #compliance .vectors{grid-template-columns:repeat(2,minmax(0,1fr))}
@media (max-width:760px){.fdsec #compliance .vectors{grid-template-columns:minmax(0,1fr)}}
.fdsec #compliance .sources{max-width:78ch;margin:2.2rem 0 0}

/* Shopify against WooCommerce ----------------------------------------------- */
.fdsec .compare-wrap{background:var(--paper-2);border:1px solid var(--paper-line);border-radius:10px;overflow:hidden}
.fdsec .compare{width:100%;border-collapse:collapse;font-size:.95rem;line-height:1.5}
.fdsec .compare th,
.fdsec .compare td{padding:1rem 1.2rem;border-bottom:1px solid var(--paper-line);text-align:left;vertical-align:top}
.fdsec .compare tbody tr:last-child th,
.fdsec .compare tbody tr:last-child td{border-bottom:0}
.fdsec .compare thead th{background:var(--paper);font-family:var(--f-mono);font-size:.68rem;font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:var(--fg-soft)}
.fdsec .compare thead th.ours{color:var(--secure-deep)}
.fdsec .compare tbody th{width:19%;font-family:var(--f-display);font-weight:600;color:var(--fg)}
.fdsec .compare td{width:40.5%;color:var(--fg-soft)}
.fdsec .compare td.ours{background:rgba(52,167,155,.07);color:var(--fg)}
.fdsec .compare-note{max-width:64ch;margin:1.6rem 0 0;color:var(--fg-soft)}
@media (max-width:640px){
  .fdsec .compare thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .fdsec .compare,
  .fdsec .compare tbody,
  .fdsec .compare tr,
  .fdsec .compare th,
  .fdsec .compare td{display:block;width:100%}
  .fdsec .compare tr{padding:1.1rem 1.1rem 1.2rem;border-bottom:1px solid var(--paper-line)}
  .fdsec .compare tbody tr:last-child{border-bottom:0}
  .fdsec .compare th,
  .fdsec .compare td{padding:0;border:0}
  .fdsec .compare tbody th{width:100%;margin-bottom:.6rem}
  .fdsec .compare td + td{margin-top:.6rem}
  .fdsec .compare td.ours{background:transparent}
  .fdsec .compare td::before{content:attr(data-label);display:block;margin-bottom:.15rem;font-family:var(--f-mono);font-size:.62rem;letter-spacing:.08em;text-transform:uppercase;color:var(--fg-soft)}
  .fdsec .compare td.ours::before{color:var(--secure-deep)}
}

/* Built and running: two lists inside the shared .case ---------------------- */
.fdsec .case h2{max-width:22ch}
.fdsec .case .lead{max-width:62ch;color:var(--fg-inv-soft)}
.fdsec .xp-col h3{color:#fff;font-size:1.05rem;margin-bottom:.9rem}
.fdsec .case .callout{margin-top:2.5rem}
.fdsec .case-links{max-width:72ch;margin:2rem 0 0;font-size:.95rem;color:var(--fg-inv-soft)}

/* Pricing sits on white: core colours these two for dark sections ----------- */
.fdsec #pricing .family-head h3{color:var(--ink)}
.fdsec #pricing .vat-note{color:var(--fg-soft)}
.fdsec .plans.pair{grid-template-columns:repeat(2,minmax(0,1fr));max-width:880px;margin-inline:auto}
@media (max-width:860px){.fdsec .plans.pair{grid-template-columns:minmax(0,1fr)}}

/* FAQ heading centred, as on the other service pages ------------------------ */
.fdsec .faq .sec-head{margin-inline:auto;text-align:center}
.fdsec .faq .sec-head .eyebrow{justify-content:center}

@media (prefers-reduced-motion:reduce){
  .fdsec p > a:not(.btn){transition:none}
}