/* Theme compatibility ------------------------------------------------------

   Loaded only on pages the plugin designs (body.voley-owns-content, set in
   includes/theme-compat.php), and only for the things that cannot be fixed in
   PHP.

   Everything here is a named theme wrapper. That is deliberate: a blind rule
   like "unpin any .container" would reach the theme's header and footer too.
   Adding a theme means adding its selector to the matching group below.

   Loads after the theme's stylesheets, and each rule already carries the body
   class, so no !important is needed even against the theme's ID selectors. */

/* The constrained content column ------------------------------------------
   Hub / Liquid Themes hands WooCommerce a Bootstrap 3 .container — 1170px at
   desktop, 1140px once its 15px gutters are taken off. The design is 1340px
   wide and brings its own centred .voley-container, so the theme's column only
   has to stop constraining; ours does the rest.

   The wrapper itself has to stay in the markup. The theme opens it on
   woocommerce_before_main_content and closes it on woocommerce_after_main_content,
   and removing one hook without the other would leave the page unbalanced. */
.voley-owns-content #lqd-contents-wrap,
.voley-owns-content #content.lqd-contents {
	width: 100%;
	max-width: none;
	padding-inline: 0;
	float: none;
}

/* Rules the theme hangs off its own sidebar switch --------------------------
   The `has-sidebar` body class is the theme's, set from an option we cannot
   reach, and two of its rules reach into our markup.

   The obvious move — strip `has-sidebar` in body_class() — is a trap. The theme
   also ships

       .lqd-woo-single-layout-3:not(.has-sidebar) div.product .woocommerce-tabs ul.wc-tabs
           { width: 100vw; left: 50%; margin-inline: -50vw }

   so taking the class away would blow the product tabs out to the full
   viewport. The class stays; the one rule that hurts is answered here instead.

   That rule is `.has-sidebar ul.products li.product { width: 33.333% }`, left
   over from WooCommerce's float layout. Our grid already sets `width: auto` on
   the same element, but at (0,0,2,1) against the theme's (0,0,3,2) it loses,
   and a fixed width on a grid item stops it filling its track — every tile
   shrinks to a third of its column. Qualified here to (0,0,4,2), which wins
   outright rather than on load order. */
.voley-owns-content ul.products.voley-shop__grid > li.product {
	width: auto;
	max-width: none;
}

/* The widget sidebar -------------------------------------------------------
   Hub prints a sidebar on single products when its own "sidebar" option is on
   — the has-sidebar body class — and an untouched WordPress install fills it
   with the default Search / Recent Posts / Recent Comments blocks.

   Turning that option off in the theme would stop the markup being printed, but
   the option lives behind a theme activation this site does not have. So the
   container is hidden here, and includes/theme-compat.php empties it of widgets
   so nothing is shipped inside it either. The element itself has to stay: it
   cannot be removed from PHP without guessing which hook closes the wrappers
   around it. */
.voley-owns-content .lqd-sidebar-container {
	display: none;
}

/* The description tab ------------------------------------------------------
   Two theme rules reach into content the shop owner wrote, and both are pitched
   at (0,4,2) — above anything product.css can reasonably say — so they are
   answered here at (0,5,2) rather than left to win on load order.

       .lqd-woo-single-layout-3 div.product .woocommerce-tabs
           .woocommerce-Tabs-panel--description > p
           { width: 67%; margin-inline: auto }

   That is a layout the theme designed for its own centred tab panel. Ours is a
   74ch measure aligned to the page, so a 67% centred paragraph sat indented
   from the lists around it — the ragged left edge in the description. */
.voley-owns-content .voley-single div.product .woocommerce-tabs .woocommerce-Tabs-panel--description > p {
	width: auto;
	margin-inline: 0;
}

/*     .woocommerce div.product .woocommerce-tabs
           .woocommerce-Tabs-panel--description ul
           { padding-inline-start: 0; list-style-position: inside }

   The theme flattens description lists to suit its own panel. product.css gives
   them their markers and indent back; this stops the theme taking the indent
   away again. */
.voley-owns-content .voley-single div.product .woocommerce-tabs .woocommerce-Tabs-panel--description :where(ul, ol) {
	padding-inline-start: 22px;
	list-style-position: outside;
}

/* What the theme's JavaScript leaves on our markup -------------------------
   The theme's script bundle runs on every page and rewrites two form controls
   after the fact. Its stylesheet is gone (see includes/theme-compat.php), so
   what it leaves behind is unstyled rather than mis-styled — but it is still
   there, and both pieces need answering.

   1. Every <select> is wrapped in a .lqd-select-wrap. Harmless once it stops
      carrying a box of its own: `display: contents` makes it vanish from
      layout entirely and hands the select straight back to its table cell. */
.voley-owns-content .lqd-select-wrap {
	display: contents;
}

/* 2. The quantity input is turned into a jQuery UI spinner, which wraps it in a
      <span class="ui-spinner"> and injects two stepper buttons. The design's
      quantity is a plain number field — see preview/single.html — so the
      buttons go.

      The wrapper is treated exactly like the select's: `display: contents`, so
      it stops generating a box and hands the input back to the pill. Styling it
      as a pill instead — which is what this file did first — produced a second
      rounded border nested inside the real one. */
.voley-owns-content .voley-single form.cart .ui-spinner-button,
.voley-owns-content .voley-single form.cart .ui-spinner .ui-icon {
	display: none;
}

.voley-owns-content .voley-single form.cart .ui-spinner {
	display: contents;
}

/* 3. The tab strip is rebuilt as an accordion, with an <h2> heading inserted
      before each panel as a direct child of .woocommerce-tabs. Those headings
      are not in the server's markup at all — the script adds them — and with
      the theme's stylesheet gone they landed unstyled, printing Description /
      Additional information / Reviews as three large italic headings above the
      panel. The plugin's own pill tabs already navigate at every width. */
.voley-owns-content .voley-single .woocommerce-tabs > h2 {
	display: none;
}

/* The theme's title bar ----------------------------------------------------
   On archives the theme prints its own page-title band — a white strip with an
   <h1> of the term name — straight after its header and before <main>:

       <div class="titlebar titlebar-default"><h1>Spectre Series</h1></div>

   Our archive opens with a black hero carrying the same name, so the page
   arrived with the title twice over.

   Hidden rather than removed because it is printed outside every WooCommerce
   hook — from the theme's own header template — with nothing a plugin can
   unhook. One consequence is worth knowing: the duplicate <h1> stays in the
   markup, so the page still has two of them for a crawler even though a reader
   sees one. */
.voley-owns-content .titlebar {
	display: none;
}

/* The theme's header -------------------------------------------------------
   The plugin injects its own header on every page it designs, and the theme
   still renders its own below it — a 50px strip holding nothing but the mobile
   navigation container. On a white page it is invisible; on the shop archive it
   sat as a white bar between our black header and our black hero.

   It should be hidden by the theme's own breakpoint CSS above 1200px, and is
   not, because that CSS is generated from theme options this installation
   cannot load. Hidden here unconditionally: the plugin's header carries its own
   drawer, so nothing is lost at any width.

   Scoped to pages the plugin owns. The same duplication is likely on every
   other page of the site; those are shortcode pages and outside what this file
   claims to cover. */
.voley-owns-content #wrap > .header.site-header {
	display: none;
}

/* Theme decoration inside our product tile ---------------------------------
   Hub appends an overlay "Select options" link to the product image by
   filtering what WooCommerce's thumbnail callback returns — a filter, not an
   action, so clearing the loop hooks never reached it. With the theme's shop
   stylesheet dequeued it arrived unstyled: a bare 135x49 link sitting under
   every tile.

   includes/theme-compat.php now clears that filter too. This rule stays as the
   guarantee: the filter list names the hooks Hub happens to use, and a theme is
   free to pick a different one.

   Qualified up to (0,5,2) to clear WooCommerce's own
   `.woocommerce ul.products li.product .button { display: inline-block }`
   at (0,4,2). Written short it loses, and the link stays on the page. */
.voley-owns-content .voley-root ul.products li.product [class*="ld-sp"] {
	display: none;
}