/* custom.css — clean overrides for de-scripted blocks (loaded last). */

/* Instagram grid: JS (imgLiquid) is stripped, so recreate the square 6-col grid. */
#sb_instagram #sbi_images {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  column-gap: 12px;
  row-gap: 12px;
  height: auto !important;
}
#sb_instagram #sbi_images .sbi_item {
  width: auto !important;
  height: auto !important;
  max-height: none !important;
  padding: 0 !important;
  margin: 0 !important;
  box-sizing: border-box;
  float: none;
  display: block;
  position: relative;
}
#sb_instagram .sbi_photo_wrap {
  position: relative;
  width: 100%;
  padding-bottom: 100%;
  height: 0;
  overflow: hidden;
  border-radius: 0;
}
#sb_instagram .sbi_photo {
  position: absolute !important;
  top: 0; left: 0;
  width: 100% !important;
  height: 100% !important;
  background-size: cover;
  background-position: center;
  display: block;
}
#sb_instagram .sbi_playbtn {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 34px; height: 34px;
  z-index: 3;
  pointer-events: none;
}

/* WooCommerce base button box — padding/radius/display live in plugin woocommerce.css
   (not the theme style.css), so transcribe them from origin (Principle A). Theme keeps
   owning color/background via .woocommerce a.button. Fixes cart "Return to shop" + all
   add-to-cart buttons rendering as plain text (was 18px, origin 31px). */
.woocommerce a.button,
.woocommerce button.button,
.woocommerce .button,
.woocommerce input.button,
.woocommerce #respond input#submit {
  display: inline-block;
  position: relative;
  margin: 0;
  padding: 0.618em 1em;
  font-size: 100%;
  font-weight: 700;
  line-height: 1;
  border: 0;
  border-radius: 3px;
  cursor: pointer;
  text-decoration: none;
  background-image: none;
  box-shadow: none;
}

/* return-to-shop button top margin (origin computes margin-top:15px on this button) */
.woocommerce .return-to-shop a.button { margin-top: 15px; }
/* product-listing add-to-cart spacing (woocommerce.css: ul.products li.product .button) */
.woocommerce ul.products li.product .button { margin-top: 1em; }

/* Footer nav columns: pack left. The theme floats the LAST widget of the row right
   (originally the newsletter col-lg-4). With the newsletter removed, "About Us" became
   last and floated right, leaving a 450px gap in the center of the footer row. */
#footer .full-row .widget_nav_menu { float: left !important; }

/* WordPress/WooCommerce accessibility helper. Lives in the plugin stylesheet
   (common.css / wp core) which wasn't localized into the clone, so without it the
   "This product has multiple variants..." describedby span rendered as visible text
   overlapping the View Product button on category pages. Standard WP clip rule. */
.screen-reader-text {
  border: 0;
  clip: rect(1px, 1px, 1px, 1px);
  clip-path: inset(50%);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute !important;
  width: 1px;
  word-wrap: normal !important;
  white-space: nowrap;
}
.screen-reader-text:focus {
  background-color: #eee;
  clip: auto !important;
  clip-path: none;
  display: block;
  height: auto;
  left: 5px;
  padding: 15px 23px 14px;
  top: 5px;
  width: auto;
  z-index: 100000;
}

/* woo-variation-swatches inline settings (plugin injects these as inline <style> in
   the page head, which was stripped during clone build). Defines the out-of-stock
   cross (--wvs-cross), selected-tick (--wvs-tick) and single-product swatch sizing.
   Data URIs are self-contained — no external host. */
:root {
--wvs-tick:url("data:image/svg+xml;utf8,%3Csvg filter='drop-shadow(0px 0px 2px rgb(0 0 0 / .8))' xmlns='http://www.w3.org/2000/svg'  viewBox='0 0 30 30'%3E%3Cpath fill='none' stroke='%23ffffff' stroke-linecap='round' stroke-linejoin='round' stroke-width='4' d='M4 16L11 23 27 7'/%3E%3C/svg%3E");
--wvs-cross:url("data:image/svg+xml;utf8,%3Csvg filter='drop-shadow(0px 0px 5px rgb(255 255 255 / .6))' xmlns='http://www.w3.org/2000/svg' width='72px' height='72px' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%230f0000' stroke-linecap='round' stroke-width='0.6' d='M5 5L19 19M19 5L5 19'/%3E%3C/svg%3E");
--wvs-single-product-item-width:30px;
--wvs-single-product-item-height:30px;
--wvs-single-product-item-font-size:16px;
}

/* Cart page: two-column layout — items table on the LEFT, "Cart totals" box on the
   RIGHT (not stacked below). The JS wraps the cart form + .cart-collaterals in
   .cart-two-col; flex puts them side by side, top-aligned. The plugin default floats
   cart_totals right at 48% BELOW the table — origin shows them beside it. */
.cart-two-col { display: flex; gap: 3%; align-items: flex-start; }
.cart-two-col .woocommerce-cart-form { flex: 1 1 62%; min-width: 0; margin-bottom: 0; }
.cart-two-col .cart-collaterals { flex: 0 0 35%; width: 35% !important; margin: 0; }
.cart-two-col .cart-collaterals .cart_totals { float: none !important; width: 100% !important; }
@media only screen and (max-width: 768px) {
  .cart-two-col { display: block; }
  .cart-two-col .cart-collaterals { width: 100% !important; margin-top: 2em; }
}

/* Checkout page: two-column — billing (.col2-set) on the LEFT, order summary
   (#order_review) floated RIGHT and sticky, matching origin (col2-set 60% float
   left, #order_review 30% float right, position:sticky). The clone markup makes
   #order_review a direct child of form.checkout (sibling of .col2-set). */
.us-merch-checkout form.checkout::after { content: ""; display: table; clear: both; }
.us-merch-checkout .col2-set { float: left; width: 60%; }
.us-merch-checkout .col2-set .col-1 { float: none; width: 100%; }
.us-merch-checkout #order_review { float: right; width: 30%; position: sticky; top: 20px; }
@media only screen and (max-width: 768px) {
  .us-merch-checkout .col2-set,
  .us-merch-checkout #order_review { float: none; width: 100%; position: static; }
  .us-merch-checkout #order_review { margin-top: 2em; }
}

/* Checkout: Street address + Postcode share one row, postcode naturally narrower. */
.us-merch-checkout .us-street-postcode-row { display: flex; gap: 4%; align-items: flex-start; }
.us-merch-checkout .us-street-postcode-row .us-street { flex: 1 1 70%; min-width: 0; }
.us-merch-checkout .us-street-postcode-row .us-postcode { flex: 0 0 26%; }
@media only screen and (max-width: 768px) {
  .us-merch-checkout .us-street-postcode-row { display: block; }
}

/* Checkout + payment: match origin underline fields (not boxed plugin defaults). */
.us-merch-checkout form.checkout .form-row .input-text,
.us-merch-checkout form.checkout .form-row select {
  width: 100%;
  max-width: 100%;
  border: 0;
  border-bottom: 1px solid #1d1c1c;
  border-radius: 0;
  padding: 10px 0;
  background: transparent;
  box-shadow: none;
  font-size: 14px;
  color: #1d1c1c;
  line-height: 1.4;
}

.us-merch-checkout form.checkout .form-row label {
  font-size: 14px;
  color: #1d1c1c;
  font-weight: 400;
  line-height: 1.4;
}

.us-merch-checkout .woocommerce-billing-fields > h3 {
  font-size: 1.25rem;
  font-weight: 600;
  margin: 0 0 1em;
  color: #1d1c1c;
}

.us-merch-checkout #order_review_heading {
  display: block !important;
  font-size: 1.25rem;
  font-weight: 600;
  margin: 0 0 1em;
  color: #1d1c1c;
}

/* Payment step — same Stripe combo block as gift-cards (giftstore/css/payment.css). */
.us-merch-payment-page .us-mp-card-fields > h3 {
  font-size: 1.25rem;
  font-weight: 600;
  margin: 0 0 1em;
  color: #1d1c1c;
}

.us-merch-payment-page #us-merch-payment-root .gs-stripe-checkout {
  font-family: inherit;
}

.us-mp-billing-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.us-mp-back-billing {
  margin: 14px 0 0;
  font-size: 14px;
}

.us-mp-back-billing a {
  color: #1d1c1c;
  text-decoration: underline;
}