.ct-home, .ct-page { font-family: 'Work Sans', system-ui, sans-serif; background: #F8F2E6; color: #2B241E; }
.ct-home h1, .ct-home h2, .ct-home h3, .ct-page h1, .ct-page h2, .ct-page h3 { font-family: 'Fraunces', Georgia, serif; }
.ct-home *, .ct-page * { box-sizing: border-box; }

/* Text links */
.ct-home a.ct-link, .ct-page a.ct-link { color: #8A4A26; text-decoration: none; transition: color 0.15s ease; }
.ct-home a.ct-link:hover, .ct-page a.ct-link:hover { color: #B4592E; text-decoration: underline; }
.ct-home a.ct-link:focus-visible, .ct-page a.ct-link:focus-visible { outline: 2px solid #2E4F3C; outline-offset: 2px; }

/* Primary (filled terracotta) buttons */
.ct-home .ct-btn-primary, .ct-page .ct-btn-primary {
  display: inline-flex; align-items: center; background: #B4592E; color: #FFFFFF !important;
  padding: 14px 28px; border-radius: 4px; font-weight: 600; font-size: 15px; text-decoration: none;
  border: none; cursor: pointer; font-family: 'Work Sans', sans-serif;
  transition: background-color 0.15s ease, transform 0.1s ease, box-shadow 0.15s ease;
}
.ct-home .ct-btn-primary:hover, .ct-page .ct-btn-primary:hover { background: #9A4A24; box-shadow: 0 4px 12px rgba(180,89,46,0.3); transform: translateY(-1px); }
.ct-home .ct-btn-primary:focus-visible, .ct-page .ct-btn-primary:focus-visible { outline: 2px solid #2E4F3C; outline-offset: 2px; }
.ct-home .ct-btn-primary:active, .ct-page .ct-btn-primary:active { transform: translateY(0); }

/* Secondary (text-only) buttons */
.ct-home .ct-btn-ghost, .ct-page .ct-btn-ghost {
  display: inline-flex; align-items: center; padding: 14px 28px; font-weight: 600; font-size: 15px;
  color: #2B241E; text-decoration: none; transition: color 0.15s ease;
}
.ct-home .ct-btn-ghost:hover, .ct-page .ct-btn-ghost:hover { color: #B4592E; }
.ct-home .ct-btn-ghost:focus-visible, .ct-page .ct-btn-ghost:focus-visible { outline: 2px solid #2E4F3C; outline-offset: 2px; }

/* Add-to-cart buttons */
.ct-home .ct-add-cart {
  background: #2E4F3C !important; color: #F8F2E6 !important; border: none !important; border-radius: 4px !important;
  padding: 10px 18px !important; font-size: 14px !important; font-weight: 600 !important; font-family: 'Work Sans', sans-serif !important;
  transition: background-color 0.15s ease;
}
.ct-home .ct-add-cart:hover { background: #22392B !important; }
.ct-home .ct-add-cart:focus-visible { outline: 2px solid #B4592E; outline-offset: 2px; }

/* Product / blog cards */
.ct-home .ct-card {
  transition: box-shadow 0.18s ease, transform 0.18s ease, border-color 0.18s ease;
}
.ct-home .ct-card:hover {
  box-shadow: 0 8px 24px rgba(43,36,30,0.12); transform: translateY(-3px); border-color: #D9BE7C;
}
.ct-home a.ct-card-link { text-decoration: none; color: inherit; }
.ct-home a.ct-card-link:focus-visible { outline: 2px solid #2E4F3C; outline-offset: 2px; }
.ct-home a.ct-title-link:hover { text-decoration: underline; }

/* Topic/filter-style chips (reserved for future use) */
.ct-home .ct-chip:hover { background: #E6D9C2; }

/* Out-of-stock badge on the shop/archive loop. Divi's WooCommerce loop template doesn't call
   wc_get_stock_html(), so there was no visual sold-out indicator at all -- just a clickable card
   like any in-stock item. CSS-only badge driven off WooCommerce's own .outofstock class. */
ul.products li.product.outofstock { position: relative; }
ul.products li.product.outofstock .et_shop_image { position: relative; display: block; }
ul.products li.product.outofstock .et_shop_image::after {
  content: "Out of Stock";
  position: absolute; top: 10px; left: 10px; z-index: 2;
  background: #2B241E; color: #FFFFFF; font-size: 11px; font-weight: 700;
  padding: 5px 10px; border-radius: 4px; letter-spacing: 0.5px; text-transform: uppercase;
}
ul.products li.product.outofstock .et_shop_image img { opacity: 0.5; }
ul.products li.product.outofstock .woocommerce-loop-product__title,
ul.products li.product.outofstock .price { opacity: 0.55; }

/* Mobile header logo (2026-11-01): the Divi Theme Builder header's logo lockup image
   (logo-lockup.png, a very wide 1290x336 text+mark lockup) was rendering at ~64x17px on
   phone-width screens -- barely legible. No Divi rule sets an explicit small height; it's
   shrinking because the logo-wrap is flex-shrinkable and losing the fight for space against
   the nav/hamburger side of the header. Force a legible, proportional size instead, loaded
   site-wide (ct-pages.css covers every template, not just .ct-home/.ct-page). */
@media (max-width: 980px) {
  .et_pb_menu__logo-wrap, .et_pb_menu__logo-slot { max-width: 55% !important; }
  .et_pb_row_0_tb_header { padding-top: 14px !important; padding-bottom: 14px !important; }
  .et_pb_menu__logo img { height: 42px !important; width: auto !important; max-width: 100% !important; }
}
@media (max-width: 480px) {
  .et_pb_menu__logo img { height: 38px !important; }
}

/* Cart/checkout totals table on mobile (2026-11-01): WooCommerce's responsive table hides the
   real <th> below ~768px and fakes the label as a floated ::before pseudo-element (width 71px,
   float:left) on the <td>. That squeezes a long value like the shipping-calculator notice into
   whatever space is left next to the floated label, forcing an awkward mid-sentence wrap.
   "Make that column wider" isn't really possible here (floated label + flowed text can't both
   get full width); stacking the label above the value instead gives the text its full column
   width and reads cleaner. Scoped to the shipping row only -- Subtotal/Total are short enough
   to render fine inline already and don't need this. */
@media (max-width: 767px) {
  .shop_table_responsive tr.woocommerce-shipping-totals td::before {
    float: none !important; display: block !important; width: auto !important; margin-bottom: 4px;
  }
}
/* Shipping-method radio list (2026-11-01, still too narrow per Matt after the label-stacking
   fix above): the real cause here is different -- .shop_table td right-aligns its VALUE column
   by default (for prices like Subtotal/Total), and that text-align:right inherits straight down
   into the shipping-method <ul> nested inside the same <td>. Right-aligning a radio+label list
   wastes the left-hand space before the content starts, so a longer label like "FedEx Standard
   Overnight: $55.81" wraps far sooner than the column's real width allows. Left-align just this
   list so labels use the column's full width before wrapping. */
.woocommerce-shipping-methods, ul#shipping_method {
  text-align: left !important;
}
@media (max-width: 480px) {
  /* Even left-aligned, the single longest label ("FedEx Standard Overnight: $55.81") is right
     at the edge of fitting on one line -- a slightly smaller size buys just enough room. */
  .woocommerce-shipping-methods label, ul#shipping_method label { font-size: 12.5px !important; }
}

/* Checkout page's "Your order" table (2026-11-01): a DIFFERENT table than the Cart page's --
   .woocommerce-checkout-review-order-table keeps a real, visible <th>/<td> side-by-side layout
   at every width (not the hide-th-use-pseudo-label pattern the Cart totals table uses), so the
   fix above doesn't reach it. With a real shipping quote in, the value column (~145px) has to
   hold 9 price lines and every single one wraps, even short ones -- confirmed live (thWidth
   165px was actually WIDER than tdWidth 145px, just for the word "Shipment"). Verified first with
   a placeholder "enter your address" state, which fit fine and hid this until real rates showed.
   Stack the shipping row's label above its value here too, same fix as Cart, scoped to just this
   row since Product/Subtotal/Total are short enough to stay side-by-side. */
@media (max-width: 480px) {
  /* display:block on th/td/tr/tfoot individually still measured 226px / 202px, unchanged
     through three different attempts -- the browser's HTML table "fixup" layout rules keep
     re-imposing table column sizing on block-level descendants as long as the outer <table>
     element itself is still display:table. The only way to fully escape it is to take the
     WHOLE table out of table layout, not just the one row. Every row becomes a flex row so
     it keeps looking like a 2-column table visually. */
  .woocommerce-checkout-review-order-table,
  .woocommerce-checkout-review-order-table thead,
  .woocommerce-checkout-review-order-table tbody,
  .woocommerce-checkout-review-order-table tfoot {
    display: block !important; width: 100% !important;
  }
  .woocommerce-checkout-review-order-table tr {
    display: flex !important; flex-wrap: wrap !important; width: 100% !important;
    justify-content: space-between !important; align-items: baseline !important;
  }
  .woocommerce-checkout-review-order-table th,
  .woocommerce-checkout-review-order-table td {
    display: block !important; width: auto !important; text-align: left !important;
    border: none !important;
  }
  /* Every OTHER row (Product, Subtotal, Total) is short enough to stay side-by-side via the
     flex row's own space-between -- only Shipment needs its value on a full-width line below. */
  .woocommerce-checkout-review-order-table tr.woocommerce-shipping-totals {
    flex-direction: column !important; justify-content: flex-start !important;
  }
  .woocommerce-checkout-review-order-table tr.woocommerce-shipping-totals th {
    padding-bottom: 4px !important;
  }
  .woocommerce-checkout-review-order-table tr.order-total td,
  .woocommerce-checkout-review-order-table tr.cart-subtotal td {
    text-align: right !important;
  }
}

/* Homepage hero H1 (2026-11-01): front-page.php hardcodes font-size:52px inline with no
   responsive sizing at all -- on a 390px phone that's ~52px text wrapping across 6 lines
   and eating ~40% of the first screen. Inline styles need !important here to win. */
@media (max-width: 980px) {
  .ct-hero-h1 { font-size: 38px !important; }
}
@media (max-width: 480px) {
  .ct-hero-h1 { font-size: 30px !important; }
}