/*
 * Darksword site-specific overrides.
 *
 * Ported verbatim from the Divi "Additional CSS" custom_css post (ID 2241)
 * on the original site. This is the real hand-authored styling layer for
 * this site - product description formatting (.title-disp/.sculptor-disp/
 * .image-list/etc, used across ~1,600 product post_content bodies),
 * WooCommerce layout overrides, and the parchment/brown (#4d4229) color
 * scheme. Loaded after divi-base.min.css so these rules win.
 */

@media all and (min-width: 1100px) {
  .et_boxed_layout #page-container {
   box-shadow: rgba(0,0,0,0.8) 0px 0px 40px 0px;
 }
 }

 /*
  * Body background colour behind the tiled parchment image.
  *
  * inc/setup.php declares `default-color => 4d4229` in add_theme_support(
  * 'custom-background' ), but WP's _custom_background_cb() deliberately
  * OMITS background-color from its generated <style id="custom-background-css">
  * whenever the effective colour equals the theme's declared default - it
  * assumes a theme that declares a default also hardcodes it in its own
  * stylesheet. We never did, so divi-base.min.css's `body{background-color:#fff}`
  * was winning and the body sat on white instead of the reference's brown.
  * (The reference emits the colour inline only because it's stored as an
  * explicit theme_mod that differs from Divi's own default-color.)
  */
 body {
   background-color: #4d4229;
 }

 /*
  * The cream wash over the parchment body background.
  *
  * On the Divi reference this lives on #et-main-area, but there the header
  * (#top-header/#main-header) is `position:absolute` - so #et-main-area is
  * the first in-flow child of #page-container and spans its FULL height
  * (y=0 to the footer), putting the wash behind the transparent header too.
  *
  * This theme keeps the header in normal flow on purpose (see the
  * `et_transparent_nav` note in docs/divi-removal-status.md - absolute
  * positioning only works on the original site because Divi's JS sets a
  * compensating #page-container padding-top at runtime). That makes
  * #et-main-area start *below* the header, which left the header band
  * showing raw un-washed parchment - visibly darker/more saturated than the
  * reference across every page.
  *
  * Fixed by moving the wash up to #page-container, which has exactly the
  * same box as the reference's #et-main-area. Must be moved, not added:
  * two stacked 50% layers would composite to 75% below the header.
  */
 #page-container {
   background-color: rgba(255, 255, 225, 0.5);
 }

 #et-main-area {
   background-color: transparent;
 }

 /*
  * Content inset on page/post templates: 90% of the content column, centred.
  *
  * On the reference, every Theme-Builder-rendered body wraps the page's own
  * content in a Divi `.et_pb_row`, and the ported Additional CSS narrows
  * those rows with `.et-db #et-boc .et-l .et_pb_row{width:90%!important}`
  * (Divi's stock value is 80%/max 1080px). Our Gutenberg content has no row
  * wrapper, so it filled the column edge to edge - every content page's text
  * sat ~40px left of the reference's and ran ~80px wider, changing every
  * line break on the page.
  *
  * Measured against the reference: content pages 810px column -> 729px
  * (x 450 -> 491), home page 795px column -> 716px (x 465 -> 505). Both are
  * exactly 90% centred, so one relative rule covers both and stays correct
  * at every breakpoint (the reference rule has no media query either).
  *
  * Scoped to body.page (and the post fallback) on purpose:
  *   - shop/category archives have no .entry-content at all, and their
  *     product grid already matches the reference at full column width;
  *   - single-product is body.single-product (never body.page), so it keeps
  *     the explicit 50/50 column widths tuned in the earlier parity passes.
  * Targets > article so single.php's <h1> (outside .entry-content) is inset
  * with its body copy, the way the reference's row wraps both.
  */
 body.page #left-area > article,
 body.single:not(.single-product) #left-area > article {
   width: 90%;
   margin-left: auto;
   margin-right: auto;
 }

 /*
  * Gap between the header and the start of page content.
  *
  * Divi's classic layout puts a flat `#main-content .container{padding-top:58px}`
  * here. The reference never uses it: its content opens with a Theme Builder
  * section + row, and the gap is those two elements' own top padding, which
  * the site's Customizer CSS retunes per breakpoint:
  *
  *   >=1350px : .et_pb_section 13px + .et_pb_row 13px          = 26px
  *   981-1349 : 1% + 1%, both resolving against the section's
  *              width (= #main-content's width)                = 2%
  *   <=980px  : Divi's stock mobile 50px + 30px                = 80px
  *
  * Percentage padding on .container resolves against #main-content too, so
  * a plain `2%` reproduces the middle tier exactly - measured against the
  * reference: 21.6px at 1200px wide, 18.4px at 1024px (identical on both).
  */
 /* Selector mirrors Divi's own `body:not(.et-tb) #main-content .container`
  * so it ties on specificity and wins on load order - a bare
  * `#main-content .container` loses to it and the 58px stayed. (The
  * reference dodges that rule entirely: Theme Builder puts et-tb-* classes
  * on <body>, so the :not() never matches there.) */
 body:not(.et-tb) #main-content .container {
   padding-top: 80px;
 }

 @media all and (min-width: 981px) {
   body:not(.et-tb) #main-content .container {
     padding-top: 2%;
   }
 }

 @media all and (min-width: 1350px) {
   body:not(.et-tb) #main-content .container {
     padding-top: 26px;
   }
 }

 /*
  * Per-layout content offsets inside the columns.
  *
  * The three Theme Builder body layouts the reference uses each space their
  * columns differently, on top of the shared section+row gap handled above:
  *
  *   - content pages: the post-content module sits 26px below the row top,
  *     while the sidebar column starts flush (its own 30px padding, above).
  *     Without this the body copy started level with the sidebar heading,
  *     26px above the reference's.
  *   - single product: the whole row is offset a further ~17px (its column
  *     carries ~30.8px of top padding where the content-page row carries
  *     13px), and the reference's breadcrumb is a standalone module with a
  *     30px gap to the images below it where ours - breadcrumb nested inside
  *     div.product - had only its own 14px bottom margin.
  */
 /* Tiered like the section+row gap above, because it comes from the same
  * kind of nested section/row padding. Reference measurements of the gap
  * between the row top and the first heading: 26px at >=1350, 14px at
  * 1200 / 13px at 1024 / 12px at 981 (1.5% of the content area fits all
  * three within a pixel), and 80px at <=980. A flat 26px was 13-14px short
  * through the middle band and 53px too tall on mobile. */
 body.page #left-area,
 body.single:not(.single-product) #left-area {
   padding-top: 80px;
 }

 @media all and (min-width: 981px) {
   body.page #left-area,
   body.single:not(.single-product) #left-area {
     padding-top: 1.5%;
   }
 }

 @media all and (min-width: 1350px) {
   body.page #left-area,
   body.single:not(.single-product) #left-area {
     padding-top: 26px;
   }
 }

 /* Desktop only: at <=980px the reference's product row drops this extra
  * offset (its columns stack), and applying it there put our image 34px
  * below the reference's at every mobile width. */
 @media all and (min-width: 981px) {
   body.single-product #content-area {
     padding-top: 17px;
   }

   body.single-product .woocommerce-breadcrumb {
     margin-bottom: 31px;
   }
 }

 /*
  * Sidebar: match Divi's *module* sidebar, not its classic theme sidebar.
  *
  * The reference renders the sidebar as a Theme Builder module
  * (.et_pb_sidebar_0_tb_body / .et_pb_widget_area), which is styled quite
  * differently from the classic #sidebar this theme emulates:
  *
  *   - padding: the module is `.et_pb_sidebar_no_border{padding:0}` plus a
  *     per-instance `padding-top:30px`. Classic #sidebar instead carries
  *     `padding-right:30px` (and a bottom pad), which squeezed every widget
  *     30px narrower than the reference (240 vs 270, 195 vs 225 on home).
  *   - widget spacing: inside the module, Divi's gutter rules resolve
  *     `.et_pb_widget{margin-bottom:0}`; classic #sidebar leaves Divi's
  *     stock 30px, adding dead space between every widget. The two ported
  *     per-widget rules (#nav_menu-5 20px, #woocommerce_product_categories-2
  *     45px) are !important and still win, as they do on the reference.
  *   - divider: classic Divi paints a 1px #e2e2e2 rule between sidebar and
  *     content via `#main-content .container:before`. The reference's
  *     Theme Builder markup has no `.container` there at all, so no line is
  *     drawn - ours was showing a grey vertical stripe the real site lacks.
  */
 /* Matches `.et_left_sidebar #sidebar{padding-right:30px}`'s specificity -
  * a bare `#sidebar` selector loses to it and left the 30px in place.
  *
  * The 30px top padding is NOT global: it comes from a per-instance
  * `.et_pb_sidebar_0_tb_body{padding-top:30px}` on the *content-page* body
  * layout only. The shop/category layout and the product layout each use a
  * sidebar module with no top padding (their columns handle the offset), so
  * those get 0 here or the sidebar sits ~30px below the reference's. */
 .et_left_sidebar #sidebar,
 .et_right_sidebar #sidebar {
   padding: 30px 0 0;
 }

 .woocommerce-page.archive #sidebar,
 .woocommerce-page.single-product #sidebar {
   padding-top: 0;
 }

 #sidebar .et_pb_widget {
   margin-bottom: 0;
   /* The module's widgets float, which makes each one a block formatting
    * context. Without it the menu <li>'s 7px bottom margin collapses out
    * through the widget (26px tall instead of the reference's 33px),
    * shifting everything below it in the sidebar up. width:100% keeps the
    * float from shrink-to-fit; #text-9's ported `max-width:210px!important`
    * still caps that one widget, exactly as on the reference. #sidebar is
    * itself floated, so it still contains these floats. */
   float: left;
   width: 100%;
 }

 #main-content .container:before {
   content: none;
 }

 #darksword-sites-we-like a, #darksword-about-us a {
   text-decoration: underline;
 }

 .wpf_items_wrapper {
   width: 100%;
   display: flex;
   flex-wrap: wrap;
 }

 .wpf_item {
   width: 48%;
   margin: 0 auto;
 }

 .wpf_item .wpf_item_name {
   border-bottom: none !important;
   margin: 0 !important;
   padding: 0;
 }

 #main-content {
   background: transparent !important;
 }

 .woocommerce div.product div.images img {
   max-height: 400px;
   width: auto;
   margin: 0 auto;
   border: 1px solid black;
 }

 /*
  * WooCommerce's own woocommerce-layout.css (always enqueued regardless of
  * add_theme_support('woocommerce')) ships a legacy `float:left;width:48%`
  * rule for div.images, meant for themes with no product-page CSS of their
  * own. Divi's reference rendering never hit this because its module markup
  * used `.et_builder_inner_content.product .et_pb_wc_images div.images`
  * (higher specificity, width:100%) instead of our plain two-column float
  * layout - without a matching override here the gallery image rendered at
  * roughly half size (shrink-to-fit around the WC-layout 48% box).
  */
 .woocommerce div.product div.images {
   float: none !important;
   width: 100% !important;
 }

 .woocommerce-product-gallery__image {
   border: none !important;
 }

 .woocommerce-product-gallery__trigger {
   display: none !important;
 }

 .title-disp { font-weight: 600; line-height: 1.5; text-align:center; text-transform:uppercase; font-variant-caps: small-caps; }
 .sculptor-disp {  text-align:center; text-transform:uppercase; margin-bottom: 15px; font-variant-caps: small-caps; }
 .painter-disp { margin-bottom: 15px; }
 .painter-disp a { text-decoration: underline; font-weight:bold; }
 .mini-desc { margin-bottom: 15px; }
 .mini-desc img { margin: 15px auto; }
 .image-list { text-align:center; }
 .image-list img { display: block; margin: 15px auto; border: 1px solid #252525; }
 .desc-disp a { text-decoration: underline; }
 .desc-disp a:hover { color:black; }
 .desc-block { text-align:left; }
 .image-list div {  text-align:left; }

 .woocommerce table.shop_attributes tr:nth-child(even) td, .woocommerce table.shop_attributes tr:nth-child(even) th {
   background: none;
 }

 .woocommerce table.shop_attributes th {
   border-bottom: none;
 }

 .woocommerce ul.products li.product a img {
   /* Natural aspect ratio, not stretched/cropped - the border just wraps
      whatever size the image actually renders at (capped at 150px tall). */
   max-height: 150px;
   width: auto;
   margin: 0 auto;
   border: 1px solid black;
 }

 .woocommerce ul.products li.product a img, .woocommerce-page ul.products li.product a img {
   margin: 0 auto !important;
 }

 /*
  * Two flex areas per card: a fixed-height image slot (this wrapper,
  * added via woocommerce-hooks.php sandwiching the core thumbnail hook -
  * see the comment there) that centers the photo without resizing it, and
  * the text/actions that follow it in normal flow. Because the slot's
  * height never changes, title/price/SKU/buttons always start at the same
  * vertical position across a row even when one card's photo is shorter
  * than its neighbors.
  */
 .woocommerce ul.products li.product > a:first-child {
   display: flex;
   flex-direction: column;
 }

 .darksword-product-image {
   height: 150px;
   display: flex;
   align-items: center;
   justify-content: center;
 }

 .et_shop_image {
   min-height: 150px;
 }

 .woocommerce-loop-product__title {
   display: block;
   min-height: 56px;
   text-align: center;
   /* WooCommerce's own loop CSS leaves this at line-height:1 (no extra
      space at all) - wrapped two-line names read as cramped. */
   line-height: 1.4;
 }

 .woocommerce ul.products li.product .price {
   text-align: center;
   font-weight: bold;
   color: #4d4229 !important;
 }

 .woocommerce ul.products li.product .darksword-product-sku {
   text-align: center;
 }

 .darksword-product-sculptor {
   min-height: 18px;
 }

 .darksword_ajax_button {
   background-color: #252525 !important;
   border: none !important;
   color: #eeeeee !important;
   font-size: 14px !important;
   width: 85%;
   text-align: center;
   margin-top: 2px !important;
 }

 .darksword_ajax_button:after {
   font-size: 20px !important;
 }

 .darksword_ajax_button:hover {
   font-weight: bold !important;
 }

 ul.products li.product .tinvwl_add_to_wishlist_button {
   margin-top: 5px;
   text-align: center;
 }

 .woocommerce ul.products li.product, .woocommerce-page ul.products li.product {
   margin: 0 2.8% 1em 0;
   /* WooCommerce forces .button to display:inline-block at higher
      specificity than any margin:auto rule here could win, so centering
      the Add to Cart button/Wishlist link has to happen via the
      container's text-align instead. */
   text-align: center;
 }

 .woocommerce-store-notice {
   background-color: black !important;
   padding-bottom: 20px !important;
 }

 .bravenet-subscribe {

     width:250px;

     font:normal 14px arial;

     margin:auto;

	 text-align: center;

   }

   .bravenet-jointext {

     font:normal 14px;
 font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;

     color:black;

     margin-bottom: 10px;

   }

   .bravenet-input {

     font: normal 12px;

 font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;

     border: 1px solid grey;

     background: white;

     color: black;

     border-radius: 5px;

     padding: 5px 10px;

     height: 35px;

     margin-bottom: 10px;

     width: 100%;

     box-sizing: border-box;

   }

   .bravenet-gobutton {

     font:normal 12px;

 font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;

     border:0;

     background: #4d4299;

     color:white;

     border-radius:5px;

     padding:5px 15px;

     height:35px;

     margin-bottom:10px;

   }

   .bravenet-footer {

     margin-bottom:10px;

     margin-top: 0px !important;
 	text-align: center !important;
   }

   .bravenet-link {

     font: normal 12px;

 font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;

     display:block;

   }

 .cc-services {
   width: 100%;
   text-align: center;
 }

 .darksword-browntext {
   color: #4d4229;
 }

 #top-header, #et-secondary-nav li ul {
     background-color: #4d4229;
 }

 #top-menu li.current-menu-item > a,
 #top-menu li.current-menu-ancestor > a,
 .nav li ul .current-menu-item a {
     color: #4d4229 !important;
   text-decoration: underline;
 }

 .sub-menu {
    background-color: #f5ecd7 !important;
 }

.sub-mini-lines .sub-menu {
	width: 420px;
}

.sub-mini-lines li a {
    width: 400px !important;
}

.darksword-thumbnail-block {
	display: flex;
	justify-content: center;
}

.darksword-thumbnail-block img {
	max-height: 175px;
	border-top: 5px solid #4d4229;
	border-bottom: 5px solid #4d4229;
}

.darksword-deluxe-block {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
}

.darksword-deluxe-block img {
	max-height: 175px;
}

p.woocommerce-result-count {
	color: #252525;
}

.woocommerce nav.woocommerce-pagination ul li a:focus, .woocommerce nav.woocommerce-pagination ul li a:hover, .woocommerce nav.woocommerce-pagination ul li span.current {
	background: #4d4229;
	color: white;
}

#darksword-testimonial-page .et_pb_post {
	margin-bottom: 15px !important;
}

.et_pb_wc_cart_notice .woocommerce-error {
	background: #4d4229;
	color: white;
}

.darksword-footer-disclaimer {
	text-align: center;
	margin: 0 auto;
}

.darksword-footer-disclaimer p {
	font-weight: 600;
	font-size: 12px;
	line-height: 18px;
}

#mobile_menu {
	background: white !important;
}

@media all and (max-width: 980px) {

}

@media all and (max-width: 767px) {
	.darksword-thumbnail-block {
		display: none;
	}
}

.cat-item-246, .cat-item-29 {
	display: none;
}

.darksword-quote-block {
	line-height: 32px;
	quotes: initial;
	font-style: italic;
}

.darksword-quote-block:before {
	color: #4d4229;
	content: open-quote;
	font-size: 32px;
	vertical-align: -5px;
}

.darksword-quote-block:after {
	color: #4d4229;
	content: close-quote;
	font-size: 32px;
	vertical-align: -5px;
}

.darksword-quote-block-link {
	width: 100%;
	text-align: right;
	font-size: 12px;
}

.darksword-quote-block-link a {
	text-decoration: underline;
}

.bravenet-subscribe {
  width: 250px;
  font: normal 14px arial;
  margin: auto;
}
.bravenet-jointext {
  font: normal 14px;
  font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
  color: black;
  margin-bottom: 10px;
}
.bravenet-input {
  font: normal 12px;
  font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
  border: 1px solid grey;
  background: white;
  color: black;
  border-radius: 5px;
  padding: 5px 10px;
  height: 35px;
  margin-bottom: 10px;
  width: 100%;
  box-sizing: border-box;
}
.bravenet-gobutton {
  font: normal 12px;
  font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
  border: 0;
  background: black;
  color: white;
  border-radius: 5px;
  padding: 5px 15px;
  height: 35px;
  margin-bottom: 10px;
}
.bravenet-footer {
  text-align: right;
  margin-bottom: 10px;
  margin-top: 10px;
}
.bravenet-link {
  font: normal 12px;
  font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
  display: block;
}

#text-5 {
	width: 100%;
}

.darksword-cc-services {
	display: flex;
	flex-direction: row;
	font-size: 12px;
	width: 100%;
	justify-content: space-between;
}

.darksword-cc-provider {
	flex: 1 0 0;
	text-align: center;
}

.bottom-nav {
float: none!important;
text-align: center!important;
}

.bottom-nav a {
	text-decoration: underline !important;
}

.deluxe-div {
    text-align: center;
    margin-left: auto;
    margin-right: auto;
}

.deluxe-div img {
    margin: 3px;
    padding: 0px;
    display: inline;
	border: 1px solid black;
}

.mini-desc img {
	border: 1px solid black;
	margin: 0 auto;
}

#woocommerce_product_categories-2 {
	margin-bottom: 45px !important;
}
#woocommerce_product_categories-2, #woocommerce_product_categories-2 h4, #woocommerce_product_categories-2 a {
	color: #111 !important;
}

.et-db #et-boc .et-l .et_pb_row {
	width: 90% !important;
}

#text-9 {
	max-width: 210px !important;
}

.posted_in {
	display: none !important;
}

.bottom-nav li {
	font-weight: normal;
}

.current-cat {
	color: #000 !important;
	font-weight: 600;
}

.woocommerce .woocommerce-info {
	background:  #4d4229 !important;
}

.darksword-cc-provider-authorize {
	padding-top: 17px;
}

.darksword-cc-provider-securetrust {
	padding-top: 21px;
}

.geotrust-text {
	font-size: 10px;
	margin-top: -17px;
}

#woocommerce_product_categories-2 h4 {
	font-weight: bold;
}

.checkout-button:hover, #place_order:hover {
	color: #fff !important;
	background: #4d4229 !important;
}

.outbound-trailer-link {
	line-height: 65px;
}

.woocommerce-MyAccount-navigation-link .woocommerce-MyAccount-navigation-link--dashboard .is-active a {
	color: #111 !important;
}

.woocommerce button.button, .woocommerce-page button.button:hover {
	color: #fff !important;
	background: #4d4229 !important;
	border: 1px solid black;
}

.woocommerce-LostPassword {
	color: black;
}

#add_payment_method #payment, .woocommerce-cart #payment, .woocommerce-checkout #payment {
	background: none !important;
}
.et-db #et-boc .et-l .et_pb_wc_add_to_cart_0_tb_body input {
	background-color: #4d4229 !important;
	border-color: #4d4229 !important;
}
.et-db #et-boc .et-l .et_pb_wc_add_to_cart_0_tb_body .quantity input.qty {
	background-color: #4d4229 !important;
	border-color: #4d4229 !important;
}
.et-db #et-boc .et-l .et_pb_wc_add_to_cart_0_tb_body input, .et-db #et-boc .et-l .et_pb_wc_add_to_cart_0_tb_body .quantity input.qty, .darksword_ajax_button {
	background-color: #4d4229 !important;
	border-color: #4d4229 !important;
}

.woocommerce a.button:hover, .woocommerce-page a.button:hover {
	background-color: #4d4229 !important;
	border-color: #4d4229 !important;
	color: #eeeeee;
}

.side-special-links a {
	font-weight: bold;
	font-size: 18px;
	color: black !important;
}

#nav_menu-5 {
	margin-bottom: 20px !important;
}

.ds_announcement {
  font-size: 24px;
  font-weight: 700;
	line-height: 130%;
	color: #800000;
}

.et_pb_section {
	background: transparent !important;
}

/*
 * Mobile nav toggle (hamburger -> dropdown list). Divi drives this with its
 * own bundled/minified JS toggling inline styles; site.js reproduces the
 * same visual result via this class instead of chasing the exact minified
 * behavior. The base .et_mobile_menu rule (divi-base.min.css) already has
 * opacity:1/visibility:visible baked in - display:none is the only thing
 * actually keeping it hidden, and that was the one property missing here,
 * so the toggle silently did nothing (confirmed via CDP: the "mobile_nav_open"
 * class was correctly applied on click, but the menu's computed display
 * stayed "none" throughout).
 */
.mobile_nav.mobile_nav_open .et_mobile_menu {
	display: block !important;
	opacity: 1;
	visibility: visible;
	position: relative;
	top: 0;
}

/*
 * Shop/category grid columns. On the old site the shop/category archives
 * were rendered by Divi's own proprietary [et_pb_shop] Builder module,
 * which has its own internal grid CSS (et_pb_shop_item_* classes) - not
 * present here since we're using WooCommerce's native archive-product.php
 * loop instead (see inc/woocommerce-setup.php). That leaves a more
 * specific ported rule, ".et_pb_gutters1.et_left_sidebar.woocommerce-page
 * #main-content ul.products li.product", forcing a 3-column width (33.333%)
 * onto the native loop. This restores a clean 4-column grid for it instead,
 * matching how the module actually rendered on the live site.
 */
.woocommerce.columns-4 ul.products li.product {
	float: left !important;
	width: 22.5% !important;
	margin: 0 2.5% 3% 0 !important;
	clear: none !important;
}
.woocommerce.columns-4 ul.products li.product.last {
	margin-right: 0 !important;
}
/*
 * Divi's own CSS assumes any #main-content with a sidebar (.et_left_sidebar
 * or .et_right_sidebar) uses a 3-column product grid, clearing floats every
 * 3rd item (":nth-child(3n+1)") to start new rows. That assumption is baked
 * in throughout its static CSS regardless of the shop module's own column
 * setting (which was 4 on the live site, handled by Divi's separate
 * [et_pb_shop] module rendering/CSS - not present here, see
 * inc/woocommerce-setup.php). Re-clear every 4th item instead.
 */
.woocommerce.columns-4 ul.products li.product:nth-child(4n+1) {
	clear: both !important;
}

/*
 * Responsive column collapse for the same grid - the desktop 4-column
 * !important rule above would otherwise also win on narrow screens and
 * overflow the viewport (confirmed: without this, product cards ran off
 * the right edge on mobile). Reference site (Divi's own shop module) was
 * measured directly via CDP at widths from 767px to 1024px: it stays a
 * clean 2-column grid for EVERY width from 767px up through 980px (no
 * intermediate 3-column tablet tier - confirmed empirically, not assumed),
 * then jumps straight to 4 columns at 981px+. Matched here with a single
 * breakpoint rather than the two-tier assumption from the initial pass.
 */
@media all and (max-width: 980px) {
	.woocommerce.columns-4 ul.products li.product {
		width: 47.5% !important;
		margin: 0 4% 4% 0 !important;
		clear: none !important;
	}
	.woocommerce.columns-4 ul.products li.product:nth-child(4n+1) {
		clear: none !important;
	}
	.woocommerce.columns-4 ul.products li.product:nth-child(2n+1) {
		clear: both !important;
	}
	.woocommerce.columns-4 ul.products li.product:nth-child(2n) {
		margin-right: 0 !important;
	}
}

/*
 * Single product meta: Divi's et_pb_wc_meta module had show_tags="off"
 * (matches the .posted_in category-hiding rule above, ported from the
 * original site's Additional CSS - tags need the same treatment since
 * we're now using WooCommerce's own default meta template instead of
 * Divi's module, and that default does render a tags line when a product
 * has tags assigned).
 */
.tagged_as {
	display: none !important;
}

/*
 * Divi's meta module for this Theme Builder layout had its border setting
 * off (`.et_pb_wc_meta_0_tb_body .product_meta { border-style: none }`),
 * but WooCommerce's own default CSS puts a `border-top: 1px solid #dadada`
 * divider above the SKU line. Our plain woocommerce_template_single_meta()
 * output has no equivalent override, so that divider showed up where the
 * reference never had one.
 */
body.single-product .product_meta {
	border-top: none;
	font-size: 15px;
	color: #242424;
	padding: 3px 0;
}

/*
 * Price and attributes-table typography: Divi's et_pb_wc_price module
 * carries a `.et_pb_wc_price .price{font-size:26px!important}` rule in its
 * own static module CSS, plus a per-instance `color:#000!important` (this
 * layout's Additional CSS). Our plain `<p class="price">` has neither
 * wrapper class, so it fell back to the theme's generic
 * `.woocommerce div.product p.price{color:#4d4229}` (brown) at the
 * default 1em/17.5px body font size. Similarly the reference's
 * et_pb_wc_additional_info module zeroes the table cell padding
 * (`padding:0`) and bolds the value cells (`font-weight:600`) - our plain
 * wc_display_product_attributes() output uses WooCommerce's own default
 * padded/unbolded cells instead.
 */
body.single-product p.price {
	font-size: 26px !important;
	line-height: 1.9em !important;
	color: #000 !important;
	padding: 0 !important;
}

body.single-product table.shop_attributes th,
body.single-product table.shop_attributes td {
	padding: 0 !important;
}

body.single-product table.shop_attributes td {
	font-weight: 600;
}

/*
 * Breadcrumb and product-title typography: ported from the reference site's
 * per-module Divi Theme Builder typography settings for this layout
 * (`et_pb_wc_breadcrumb_0_tb_body` / `et_pb_wc_title_0_tb_body`), which are
 * dynamically generated CSS scoped to those specific module instances and
 * were never part of the "Additional CSS" custom_css post (2241) ported
 * elsewhere in this file.
 */
body.single-product .woocommerce-breadcrumb,
body.single-product .woocommerce-breadcrumb a {
	font-weight: 600;
	font-variant: small-caps;
	font-size: 14px;
}

body.single-product .product_title {
	font-weight: 700;
	font-variant: small-caps;
	font-size: 28px;
}

/*
 * The image/summary row in single-product.php has no Divi module CSS behind
 * it (these are our own plain class names, not real Divi builder classes),
 * so neither column had an explicit width - .et_pb_column--product-summary
 * shrink-to-fit against its wide content (the attributes table) exceeded the
 * space left beside the image column and wrapped below it instead of
 * sitting side by side, which is how the reference's Divi row renders it.
 *
 * Reference measurement (CDP, 2026-08-14): the row also inherited the base
 * `.et_pb_row{width:80%;max-width:1080px;margin:auto}` rule, shrinking it to
 * ~90% of the available content width instead of filling it - the
 * reference's row sits inside a Divi "specialty column" that isn't subject
 * to that auto-centering rule at all. The reference's own image/summary
 * split is an even 50/50 (not 40/56), and its image module carries a fixed
 * 30px left/right padding baked into the module box (not a percentage) -
 * without it the gallery image rendered ~40px narrower than the reference's
 * 345px.
 */
.et_pb_row--product-main {
	overflow: hidden;
	width: 100% !important;
	max-width: none !important;
	margin: 0 !important;
}

.et_pb_column--product-image {
	float: left;
	width: 50%;
	padding: 0 30px;
	box-sizing: border-box;
}

.et_pb_column--product-summary {
	float: right;
	width: 50%;
}

/*
 * ...and the matching breakpoint for those two widths. The reference's Divi
 * row stacks its columns full-width at <=980px; the 50/50 split above had no
 * responsive override, so between 768px and 980px our image column stayed
 * half-width (337px at 980 / 251px at 768) against the reference's full-width
 * 734px / 562px. Below ~767px the ported CSS already stacked them, which is
 * why this only showed up in the 768-980 band. The image column keeps its
 * 0 30px padding when stacked - that matches the reference too (562px image
 * inside a 622px column at 768px wide).
 */
@media all and (max-width: 980px) {
	.et_pb_column--product-image,
	.et_pb_column--product-summary {
		float: none;
		width: 100%;
	}
}

/*
 * Reference measurement (CDP computed-style comparison against the Divi
 * environment, 2026-08-13) showed the dotted td border-bottom IS present on
 * the reference site - the assumption above was wrong and has been reverted
 * (WC's own default `border-bottom: 1px dotted rgba(0,0,0,.1)` on td is left
 * alone). What the reference DOES override is WC's default italic font-style
 * on td - Divi's et_pb_wc_additional_info module for this Theme Builder
 * layout had a scoped `font-style: normal` rule
 * (`.et_pb_wc_additional_info_0_tb_body td`) that our plain
 * wc_display_product_attributes() markup has no equivalent for.
 */
.woocommerce table.shop_attributes td {
	font-style: normal;
}

/*
 * Custom Miniature Finder (darksword_miniature_finder shortcode). Replaces
 * the Themify WC Product Filter plugin's markup/CSS on that one page - see
 * inc/miniature-finder.php for why the plugin itself never actually
 * filtered anything there.
 */
.darksword-finder-form {
	margin-bottom: 30px;
}

.darksword-finder-grid {
	display: grid;
	grid-template-columns: repeat( 2, 1fr );
	gap: 18px 30px;
	max-width: 700px;
}

.darksword-finder-field {
	display: flex;
	flex-direction: column;
}

.darksword-finder-field label {
	font-weight: 600;
	margin-bottom: 6px;
}

.darksword-finder-field select,
.darksword-finder-field input[type="text"] {
	width: 100%;
	box-sizing: border-box;
	padding: 8px 10px;
	border: 1px solid #ccc;
	border-radius: 3px;
	background-color: #fff;
	font-size: 15px;
}

.darksword-finder-actions {
	display: flex;
	align-items: center;
	gap: 20px;
	align-self: end;
}

.darksword-finder-submit {
	cursor: pointer;
	font-family: inherit;
}

.darksword-finder-reset {
	text-decoration: underline;
}

.darksword-finder-results {
	margin-top: 20px;
}

.darksword-finder-pagination ul {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	list-style: none;
	margin: 30px 0 0;
	padding: 0;
}

.darksword-finder-pagination .page-numbers {
	display: inline-block;
	padding: 6px 12px;
	border: 1px solid #ccc;
	border-radius: 3px;
}

.darksword-finder-pagination .page-numbers.current {
	background-color: #4d4229;
	color: #fff;
	border-color: #4d4229;
}

@media all and (max-width: 767px) {
	.darksword-finder-grid {
		grid-template-columns: 1fr;
	}
}

/*
 * Page/post body copy: Divi's ported base CSS leaves the intro heading
 * (e.g. the homepage's "Welcome to..." text, authored as an h2) at
 * line-height:26px for a 26px font - i.e. exactly 1x, no space between
 * wrapped lines at all - and paragraph text a bit tighter than is
 * comfortable to read. !important to beat that same-specificity Divi rule.
 */
.entry-content h2.wp-block-heading {
	line-height: 1.5 !important;
}

.entry-content p {
	line-height: 1.9 !important;
}