/* ==========================================================================
   ART I FLOW — MAIN STYLESHEET
   Standalone theme. No parent theme — this file styles raw WP/WooCommerce
   markup from the ground up.
   ========================================================================== */

/* ---------- Design tokens ---------- */
:root {
  --af-cream: #F8F4EC;
  --af-ink: #2B2420;
  --af-ink-soft: #5A5048;
  --af-accent: #FF6B4A;
  --af-accent-dark: #E5502E;
  --af-gold: #F2B84B;
  --af-green: #3E8E5A;
  --af-card-bg: #FFFFFF;
  --af-border: #EDE6D8;
  --af-radius: 14px;
  --af-radius-sm: 8px;
  --af-max: 1200px;
  --af-shadow: 0 12px 28px rgba(43,36,32,0.10);
}

/* ---------- Reset basics ---------- */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  background: var(--af-cream);
  color: var(--af-ink);
  line-height: 1.55;
  font-size: 16px;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--af-accent-dark); text-decoration: none; }
a:hover { text-decoration: underline; }
ul { margin: 0; padding: 0; }
h1, h2, h3, h4 { font-weight: 800; line-height: 1.2; margin: 0 0 0.5em; }
.af-container { max-width: var(--af-max); margin: 0 auto; padding: 0 20px; }
.screen-reader-text {
  position: absolute !important;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(1px,1px,1px,1px);
}
.skip-link {
  position: absolute;
  top: -100px;
  left: 10px;
  background: var(--af-ink);
  color: #fff;
  padding: 10px 16px;
  border-radius: 6px;
  z-index: 10000;
}
.skip-link:focus { top: 10px; }

/* ==========================================================================
   HEADER
   ========================================================================== */
.af-trust-banner {
  background: var(--af-ink);
  color: #fff;
  text-align: center;
  font-size: 13px;
  font-weight: 600;
  padding: 8px 12px;
}
.af-trust-banner span { margin: 0 10px; white-space: nowrap; display: inline-block; }

.site-header {
  background: #fff;
  border-bottom: 1px solid var(--af-border);
  box-shadow: 0 1px 6px rgba(0,0,0,0.04);
  position: sticky;
  top: 0;
  z-index: 999;
}
.af-header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 16px 20px;
  max-width: var(--af-max);
  margin: 0 auto;
  flex-wrap: wrap;
}
.site-title {
  font-size: 22px;
  font-weight: 800;
  letter-spacing: 0.01em;
  margin: 0;
}
.site-title a { color: var(--af-ink); }
.site-title a:hover { text-decoration: none; color: var(--af-accent-dark); }

.main-navigation { flex: 1; }
.main-navigation ul {
  display: flex;
  gap: 26px;
  list-style: none;
  justify-content: center;
  flex-wrap: wrap;
}
.main-navigation ul li a {
  font-weight: 600;
  font-size: 15px;
  color: var(--af-ink);
}
.main-navigation ul li a:hover { color: var(--af-accent-dark); text-decoration: none; }

.af-header-actions { display: flex; align-items: center; gap: 16px; }
.af-header-icon-link {
  position: relative;
  font-size: 20px;
  color: var(--af-ink);
}
.af-cart-count {
  position: absolute;
  top: -8px;
  right: -10px;
  background: var(--af-accent);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  min-width: 16px;
  height: 16px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 3px;
}

.af-menu-toggle {
  display: none;
  background: none;
  border: 1px solid var(--af-border);
  border-radius: 8px;
  padding: 8px 10px;
  font-size: 18px;
  cursor: pointer;
}

@media (max-width: 780px) {
  .main-navigation { order: 3; flex-basis: 100%; display: none; }
  .main-navigation.is-open { display: block; }
  .main-navigation ul { flex-direction: column; gap: 4px; padding: 10px 0; }
  .main-navigation ul li a { display: block; padding: 10px 4px; border-bottom: 1px solid var(--af-border); }
  .af-menu-toggle { display: inline-block; }
}

/* ==========================================================================
   HERO
   ========================================================================== */
.af-hero { text-align: center; padding: 64px 20px 48px; }
.af-hero-eyebrow {
  color: var(--af-accent-dark);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom: 10px;
}
.af-hero h1 { font-size: clamp(32px, 5vw, 52px); margin-bottom: 14px; }
.af-hero p { max-width: 560px; margin: 0 auto 26px; font-size: 17px; color: var(--af-ink-soft); }

.af-cta-button, .af-hero .af-cta-button {
  background: var(--af-accent);
  color: #fff !important;
  border: none;
  padding: 16px 34px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 0.02em;
  display: inline-block;
  cursor: pointer;
  transition: transform 0.15s ease, background 0.15s ease;
  box-shadow: 0 6px 18px rgba(255,107,74,0.35);
  text-decoration: none;
}
.af-cta-button:hover { background: var(--af-accent-dark); transform: translateY(-2px); color: #fff; text-decoration: none; }
.af-cta-button.af-secondary {
  background: transparent;
  color: var(--af-ink) !important;
  border: 2px solid var(--af-ink);
  box-shadow: none;
}
.af-cta-button.af-secondary:hover { background: var(--af-ink); color: #fff !important; }

/* ==========================================================================
   PAGE HEADER (shop archive, single pages, blog)
   ========================================================================== */
.af-page-header {
  text-align: center;
  padding: 44px 20px 20px;
}
.af-page-header h1 { font-size: 30px; margin-bottom: 6px; }
.af-page-header p { color: var(--af-ink-soft); }

/* ==========================================================================
   TRUST STRIP
   ========================================================================== */
.af-trust-strip {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  max-width: 1000px;
  margin: 0 auto;
  padding: 30px 20px;
}
@media (max-width: 700px) { .af-trust-strip { grid-template-columns: 1fr; } }
.af-trust-item { text-align: center; padding: 18px; }
.af-trust-item .af-trust-icon { font-size: 30px; margin-bottom: 8px; }
.af-trust-item h4 { font-size: 15px; margin-bottom: 4px; }
.af-trust-item p { font-size: 13.5px; color: var(--af-ink-soft); margin: 0; }

/* ==========================================================================
   PRODUCT GRID (shop loop — homepage, archive, related products)
   ========================================================================== */
.af-shop-section { max-width: var(--af-max); margin: 0 auto; padding: 20px 20px 60px; }
.af-shop-section h2 { text-align: center; font-size: 28px; margin-bottom: 6px; }
.af-section-sub { text-align: center; color: var(--af-ink-soft); margin-bottom: 32px; }

ul.products, .af-product-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 22px;
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
  justify-content: center;
}
@media (max-width: 680px) {
  ul.products, .af-product-grid { grid-template-columns: 1fr; gap: 16px; }
}
/* Mobile card layout override is placed near the end of this file
   (see "MOBILE PRODUCT CARD OVERRIDE" section) so it wins the cascade
   against the generic card rules below, which are written desktop-first. */

ul.products li.product, .af-product-card {
  background: var(--af-card-bg);
  border: 1px solid var(--af-border);
  border-radius: var(--af-radius);
  padding: 12px 12px 16px;
  position: relative;
  transition: box-shadow 0.2s ease, transform 0.2s ease;
  list-style: none;
}
@media (min-width: 681px) {
  ul.products li.product, .af-product-card { max-width: 280px; }
}
ul.products li.product:hover, .af-product-card:hover {
  box-shadow: var(--af-shadow);
  transform: translateY(-3px);
}
ul.products li.product a, .af-product-card a { text-decoration: none; }
ul.products li.product img, .af-product-card img {
  border-radius: 10px;
  aspect-ratio: 4/5;
  object-fit: cover;
  width: 100%;
  margin-bottom: 10px;
}
.woocommerce-loop-product__title, .af-product-card h3 {
  font-size: 14.5px;
  font-weight: 700;
  line-height: 1.3;
  margin: 4px 0 6px;
  color: var(--af-ink);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: calc(1.3em * 3);
}

.onsale, .af-badge-sale {
  background: var(--af-accent) !important;
  color: #fff !important;
  font-size: 11px;
  font-weight: 800;
  border-radius: 6px;
  padding: 4px 9px;
  top: 10px;
  left: 10px;
  right: auto;
  min-height: unset;
  min-width: unset;
  line-height: 1.4;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  position: absolute;
  z-index: 2;
}

.price { font-size: 15px; margin: 4px 0 12px; color: var(--af-ink); }
.price del { opacity: 0.5; font-size: 13px; margin-right: 6px; }
.price ins { text-decoration: none; font-weight: 800; color: var(--af-accent-dark); }

.star-rating {
  font-size: 13px;
  color: var(--af-gold);
  margin-bottom: 6px;
  display: inline-block;
  overflow: hidden;
  position: relative;
  height: 1.2em;
  line-height: 1.2em;
  width: 5.4em;
  font-family: sans-serif;
}
.star-rating::before {
  content: "☆☆☆☆☆";
  position: absolute;
  top: 0; left: 0;
  letter-spacing: 2px;
}
.star-rating span { overflow: hidden; float: left; top: 0; left: 0; position: absolute; height: 100%; }
.star-rating span::before {
  content: "★★★★★";
  position: absolute;
  top: 0; left: 0;
  color: var(--af-gold);
  letter-spacing: 2px;
}
.woocommerce-review-link { font-size: 12px; color: var(--af-ink-soft); margin-left: 4px; }

.button,
a.button,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce #respond input#submit,
ul.products li.product a.button,
ul.products li.product a.add_to_cart_button,
.af-product-card .af-buy-btn {
  background: var(--af-ink) !important;
  color: #fff !important;
  border: none !important;
  border-radius: 8px !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  padding: 10px 14px !important;
  width: 100%;
  text-align: center;
  display: block;
  cursor: pointer;
  text-decoration: none !important;
  opacity: 1 !important;
  box-shadow: none !important;
}
.button:hover,
a.button:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
ul.products li.product a.button:hover {
  background: var(--af-accent) !important;
  color: #fff !important;
  text-decoration: none !important;
}

/* WooCommerce adds a "Loading" / disabled-look class during AJAX add-to-cart —
   make sure that doesn't look permanently greyed out */
.woocommerce a.added_to_cart {
  background: var(--af-green) !important;
  color: #fff !important;
  margin-top: 8px;
  display: block;
  text-align: center;
  border-radius: 8px;
  padding: 8px 12px;
  font-size: 12.5px;
  font-weight: 700;
}

/* Single product "buy" button larger */
.single_add_to_cart_button {
  width: auto;
  padding: 15px 40px;
  border-radius: 999px;
  background: var(--af-accent) !important;
  font-size: 15px;
}
.single_add_to_cart_button:hover { background: var(--af-accent-dark) !important; }

/* ==========================================================================
   SINGLE PRODUCT PAGE
   ========================================================================== */
.af-single-product {
  max-width: var(--af-max);
  margin: 0 auto;
  padding: 40px 20px 60px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 44px;
}
@media (max-width: 800px) { .af-single-product { grid-template-columns: 1fr; gap: 24px; } }
.af-single-product .woocommerce-product-gallery img { border-radius: var(--af-radius); }
.af-single-summary h1 { font-size: 28px; margin-bottom: 8px; }
.af-single-summary .price { font-size: 24px; margin: 12px 0; }
.af-single-summary .woocommerce-product-details__short-description { color: var(--af-ink-soft); margin-bottom: 20px; }
.af-trust-mini {
  display: flex;
  gap: 18px;
  flex-wrap: wrap;
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid var(--af-border);
  font-size: 13px;
  color: var(--af-ink-soft);
}

.woocommerce-tabs { margin-top: 40px; }
.woocommerce-tabs ul.tabs {
  display: flex;
  gap: 10px;
  list-style: none;
  border-bottom: 1px solid var(--af-border);
  margin-bottom: 20px;
}
.woocommerce-tabs ul.tabs li {
  padding: 10px 18px;
  font-weight: 700;
  cursor: pointer;
  border-bottom: 2px solid transparent;
}
.woocommerce-tabs ul.tabs li.active { border-color: var(--af-accent); color: var(--af-accent-dark); }

/* Related products heading */
.related.products h2 { text-align: center; font-size: 24px; margin: 50px 0 24px; }

/* ==========================================================================
   MY ACCOUNT (downloads, orders, addresses)
   ========================================================================== */
.woocommerce-MyAccount-navigation ul {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 26px;
  border-bottom: 1px solid var(--af-border);
  padding-bottom: 14px;
}
.woocommerce-MyAccount-navigation ul li a {
  display: inline-block;
  padding: 8px 16px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 13.5px;
  color: var(--af-ink);
  background: #fff;
  border: 1px solid var(--af-border);
}
.woocommerce-MyAccount-navigation ul li.is-active a,
.woocommerce-MyAccount-navigation ul li a:hover {
  background: var(--af-ink);
  color: #fff;
  text-decoration: none;
}

/* Downloads table — this is the primary delivery point for digital
   products, so it gets the same card treatment as the rest of the shop
   rather than falling back to WooCommerce's bare default table. */
table.woocommerce-table--order-downloads {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  background: #fff;
  border: 1px solid var(--af-border);
  border-radius: var(--af-radius);
  overflow: hidden;
}
table.woocommerce-table--order-downloads th,
table.woocommerce-table--order-downloads td {
  padding: 14px 16px;
  border-bottom: 1px solid var(--af-border);
  text-align: left;
  font-size: 14px;
}
table.woocommerce-table--order-downloads tr:last-child td { border-bottom: none; }
table.woocommerce-table--order-downloads .woocommerce-MyAccount-downloads-file a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--af-accent);
  color: #fff !important;
  padding: 9px 18px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 13px;
  text-decoration: none !important;
}
table.woocommerce-table--order-downloads .woocommerce-MyAccount-downloads-file a:hover {
  background: var(--af-accent-dark);
}
table.woocommerce-table--order-downloads .woocommerce-MyAccount-downloads-file a::before {
  content: "⬇";
}

/* Empty state (no downloads yet) */
.woocommerce-MyAccount-content > p:only-child {
  background: #fff;
  border: 1px solid var(--af-border);
  border-radius: var(--af-radius);
  padding: 24px;
  text-align: center;
  color: var(--af-ink-soft);
}

/* Order details table on the "View order" screen */
.woocommerce-order-details, .woocommerce-customer-details {
  background: #fff;
  border: 1px solid var(--af-border);
  border-radius: var(--af-radius);
  padding: 20px;
  margin-bottom: 24px;
}

/* ==========================================================================
   CART & CHECKOUT
   ========================================================================== */
.af-page-content {
  max-width: 900px;
  margin: 0 auto;
  padding: 30px 20px 70px;
}
table.shop_table {
  width: 100%;
  border-collapse: collapse;
  background: #fff;
  border-radius: var(--af-radius);
  overflow: hidden;
  border: 1px solid var(--af-border);
}
table.shop_table th, table.shop_table td {
  padding: 14px;
  border-bottom: 1px solid var(--af-border);
  text-align: left;
}
table.shop_table tr:last-child td { border-bottom: none; }
.woocommerce-checkout input[type="text"],
.woocommerce-checkout input[type="email"],
.woocommerce-checkout input[type="tel"],
.woocommerce-checkout textarea,
.woocommerce-checkout select,
.woocommerce form .form-row input.input-text,
.woocommerce-cart input.qty {
  width: 100%;
  padding: 11px 14px;
  border: 1px solid var(--af-border);
  border-radius: var(--af-radius-sm);
  font-size: 14px;
}
.woocommerce-checkout #payment { background: #fff; border-radius: var(--af-radius); padding: 20px; border: 1px solid var(--af-border); }

/* ==========================================================================
   EMAIL CAPTURE
   ========================================================================== */
.af-email-section {
  background: var(--af-ink);
  color: #fff;
  text-align: center;
  padding: 50px 20px;
  margin-top: 40px;
}
.af-email-section h3 { color: #fff; font-size: 24px; margin-bottom: 8px; }
.af-email-section p { opacity: 0.8; margin-bottom: 22px; }
.af-email-form {
  display: flex;
  justify-content: center;
  gap: 10px;
  max-width: 420px;
  margin: 0 auto;
  flex-wrap: wrap;
}
.af-email-form input[type="email"] {
  flex: 1;
  min-width: 200px;
  padding: 13px 16px;
  border-radius: 999px;
  border: none;
  font-size: 14px;
}
.af-email-form button {
  background: var(--af-accent);
  color: #fff;
  border: none;
  padding: 13px 26px;
  border-radius: 999px;
  font-weight: 700;
  cursor: pointer;
}
.af-email-form button:hover { background: var(--af-accent-dark); }
.af-email-message {
  display: inline-block;
  padding: 12px 22px;
  border-radius: 999px;
  background: rgba(255,255,255,0.1);
  font-weight: 700;
  font-size: 14px;
}
.af-email-message.af-email-error { background: rgba(255,107,74,0.25); }

/* ==========================================================================
   FOOTER
   ========================================================================== */
.site-footer { background: var(--af-ink); color: rgba(255,255,255,0.85); padding: 50px 20px 0; }
.af-footer-grid {
  max-width: var(--af-max);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: 30px;
  padding-bottom: 30px;
}
@media (max-width: 700px) { .af-footer-grid { grid-template-columns: 1fr; } }
.af-footer-grid h4 { color: #fff; font-size: 15px; margin-bottom: 14px; }
.af-footer-grid ul { list-style: none; }
.af-footer-grid ul li { margin-bottom: 8px; }
.af-footer-grid ul li a { color: rgba(255,255,255,0.75); }
.af-footer-grid ul li a:hover { color: #fff; }
.af-footer-brand p { color: rgba(255,255,255,0.65); font-size: 14px; max-width: 320px; }
.af-footer-social { display: flex; gap: 12px; margin-top: 14px; }
.af-footer-social a {
  width: 34px; height: 34px;
  border-radius: 50%;
  background: rgba(255,255,255,0.1);
  display: flex; align-items: center; justify-content: center;
  color: #fff;
}
.af-footer-social a:hover { background: var(--af-accent); text-decoration: none; }
.af-footer-legal {
  text-align: center;
  font-size: 12.5px;
  color: rgba(255,255,255,0.55);
  padding: 16px 20px;
  border-top: 1px solid rgba(255,255,255,0.08);
}
.af-footer-legal a { color: rgba(255,255,255,0.7); }

/* ==========================================================================
   BLOG / ARCHIVE / SINGLE POST
   ========================================================================== */
.af-post-grid {
  max-width: var(--af-max);
  margin: 0 auto;
  padding: 20px 20px 60px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
@media (max-width: 900px) { .af-post-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .af-post-grid { grid-template-columns: 1fr; } }
.af-post-card {
  background: #fff;
  border: 1px solid var(--af-border);
  border-radius: var(--af-radius);
  overflow: hidden;
}
.af-post-card img { aspect-ratio: 16/10; object-fit: cover; width: 100%; }
.af-post-card-body { padding: 16px; }
.af-post-card-body h3 { font-size: 17px; margin-bottom: 6px; }
.af-post-card-body .af-post-meta { font-size: 12.5px; color: var(--af-ink-soft); margin-bottom: 8px; }

.af-single-post { max-width: 760px; margin: 0 auto; padding: 30px 20px 70px; }
.af-single-post img { border-radius: var(--af-radius); margin-bottom: 20px; }
.af-single-post .af-post-meta { color: var(--af-ink-soft); font-size: 14px; margin-bottom: 20px; }

/* ==========================================================================
   404
   ========================================================================== */
.af-404 { text-align: center; padding: 100px 20px; }
.af-404 h1 { font-size: 90px; color: var(--af-border); margin-bottom: 0; }
.af-404 p { color: var(--af-ink-soft); margin-bottom: 24px; }

/* ==========================================================================
   WIDGETS / SIDEBAR (rarely used but included for completeness)
   ========================================================================== */
.widget { background: #fff; border: 1px solid var(--af-border); border-radius: var(--af-radius); padding: 18px; margin-bottom: 20px; }
.widget-title { font-size: 15px; margin-bottom: 12px; }

/* ==========================================================================
   MOBILE PRODUCT CARD OVERRIDE
   Placed at the end of the file on purpose: it must win the cascade
   against the desktop-first ul.products/.af-product-card rules earlier
   in this file, which share the same selectors and specificity.
   Turns each shop-loop card into a full-width row (image left, title/
   price right, Add to Cart as its own row below) instead of a cramped
   2-up grid with a tiny square thumbnail.
   ========================================================================== */
@media (max-width: 680px) {
  ul.products, .af-product-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  ul.products li.product, .af-product-card {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    padding: 14px;
  }

  ul.products li.product > a:first-child,
  .af-product-card > a:first-child {
    display: flex;
    gap: 14px;
    flex: 1 1 100%;
    min-width: 0;
  }

  ul.products li.product img, .af-product-card img {
    width: 110px;
    flex: 0 0 110px;
    aspect-ratio: 1/1;
    margin-bottom: 0;
  }

  .woocommerce-loop-product__title, .af-product-card h3 {
    font-size: 16px;
    -webkit-line-clamp: 2;
    min-height: calc(1.3em * 2);
  }

  .price { font-size: 16px; }
  .onsale, .af-badge-sale { top: 8px; left: 8px; }

  ul.products li.product a.button,
  ul.products li.product a.add_to_cart_button,
  .af-product-card .af-buy-btn {
    flex: 1 1 100%;
  }
}