/* shop-v2.css — Skanda Vale static site, owner-approved changes
   (chat, 2026-07-07): shop grid full width after the filter sidebar
   removal; covers uncropped and larger; grid rows bottom-aligned.
   Authored file, like sv-style/ninja-match-gravity.css. Linked from
   /hospice-shop/index.html and the 6 product pages.
   2026-08-11 (owner): shop rules text moved below the description and
   given breathing room; "The Spark Becomes Fire" featured double-width
   on its own row so the grid no longer ends half empty. */

/* products column spans the full width now the sidebar is gone */
.elementor-element-00fb40d{width:100% !important;}

/* 6-book grid: 3 across, bottom-aligned rows, roomy gaps */
ul.products.columns-3{
  display:grid !important;
  grid-template-columns:repeat(3, minmax(0,1fr));
  gap:3.5rem 2.75rem;
  align-items:end;
  width:100%;
}
ul.products.columns-3 > li.jet-woo-builder-product{
  width:auto !important;
  margin:0 !important;
  float:none !important;
}

/* the theme's scripts inject a non-product <li> (style holder) at
   runtime — keep it out of the grid so it can't leave an empty cell */
ul.products.columns-3 > li:not(.jet-woo-builder-product){display:none !important;}

/* WooCommerce's clearfix pseudo-elements become invisible grid items
   and steal the first cell — remove them */
ul.products.columns-3::before,
ul.products.columns-3::after{display:none !important;content:none !important;}

/* full covers, never cropped */
.jet-woo-builder-archive-product-thumbnail img{
  width:100% !important;
  height:auto !important;
  object-fit:contain;
}

@media (max-width:1024px){
  ul.products.columns-3{grid-template-columns:repeat(2, minmax(0,1fr));}
}
@media (max-width:767px){
  ul.products.columns-3{grid-template-columns:1fr;}
}


/* ---- 2026-08-11, owner-requested ------------------------------- */

/* Shop rules paragraph: now sits BELOW the book description. It used to
   butt straight up against the PayPal button. Give it clear space and
   set it slightly quieter than body copy — it is reference information,
   not part of the book's description. */
.sv-shop-rules{
  margin-top:2.25rem;
  padding-top:1.5rem;
  border-top:1px solid rgba(0,0,0,.12);
}
.sv-shop-rules p{
  margin:0;
  font-size:.9em;
  line-height:1.65;
  opacity:.8;
}

/* Featured layout, revised 2026-08-11 (owner, third pass: "I prefer the
   second row of books as two column, just more space around each image
   (smaller book images)").

   Two columns throughout. The Spark Becomes Fire sits alone on row one
   with its cover filling the cell. The other four follow in two rows of
   two — same cell width, but their covers are held to a smaller share of
   the cell so each has generous space around it. Prominence therefore
   comes from cover size, not cell size, and no row is half empty. */
ul.products.columns-3{
  grid-template-columns:repeat(2, minmax(0,1fr));
  gap:4.5rem 3.5rem;
}
ul.products.columns-3 > li.post-79164{
  grid-column:1 / -1;                 /* owns row one outright... */
  grid-row:1;
  justify-self:start;                 /* ...but sits hard left */
  max-width:calc(50% - 1.75rem);      /* one column wide (half the gap off) */
}
ul.products.columns-3 > li.jet-woo-builder-product:not(.post-79164){
  grid-row:auto;
}

/* Smaller covers for the four non-featured books, aligned LEFT with the
   title and price beneath them (owner: "those shop images need to be
   left aligned, the text looks rubbish underneath them"), and space
   between cover and text so the title does not butt up against it. */
ul.products.columns-3 > li.jet-woo-builder-product:not(.post-79164)
  .jet-woo-builder-archive-product-thumbnail{
  padding:0;
  margin-bottom:1.5rem;
}
ul.products.columns-3 > li.jet-woo-builder-product:not(.post-79164)
  .jet-woo-builder-archive-product-thumbnail img{
  max-width:62%;
  margin-left:0;
  margin-right:auto;
  display:block;
}

/* the featured cover also needs air under it */
ul.products.columns-3 > li.post-79164
  .jet-woo-builder-archive-product-thumbnail{
  margin-bottom:1.5rem;
}

/* every tile's text block sits hard left under its cover */
ul.products.columns-3 > li.jet-woo-builder-product .jet-woo-builder-archive-product-title,
ul.products.columns-3 > li.jet-woo-builder-product .jet-woo-builder-archive-product-price,
ul.products.columns-3 > li.jet-woo-builder-product .jet-woo-builder-archive-product-button{
  text-align:left;
}

/* the result count is a relic of the removed search/filter bar */
.woocommerce-result-count,
.elementor-jet-woo-builder-products-result-count{
  display:none !important;
}

@media (max-width:767px){
  ul.products.columns-3{grid-template-columns:1fr; gap:3rem;}
  ul.products.columns-3 > li.post-79164{grid-column:1; grid-row:1;}
  ul.products.columns-3 > li.jet-woo-builder-product:not(.post-79164)
    .jet-woo-builder-archive-product-thumbnail img{max-width:70%;}
}

/* Product pages: the PayPal button was butted against the price above
   and the description below. Give it room on both sides. */
.elementor-button-wrapper:has(a[href*="paypal.com"]){
  margin-top:1.75rem;
  margin-bottom:2.25rem;
}

/* A way back out of a product page (owner: "there's no clear route out
   of each product page"). Sits under the postage/PayPal note. */
.sv-shop-back{ margin-top:1.75rem; }
.sv-shop-back p{ margin:0; }
.sv-shop-back a{
  display:inline-block;
  font-size:1rem;
  font-weight:700;
  letter-spacing:.06em;
  text-transform:uppercase;
  text-decoration:none;
  color:#ca4d2a;
  border-bottom:3px solid #ca4d2a;
  padding-bottom:5px;
}
.sv-shop-back a:hover{ border-bottom-color:#ca4d2aad; }