/* =========================================
   STAREL STANDARD PDP
   For simple and standard variable products
========================================= */

:root{
  --starel-black:#111;
  --starel-grey-strong:#828282;
  --starel-grey-border:#e6e6e6;
  --starel-grey-fill:#f4f4f4;
  --starel-radius:8px;
}

/* -----------------------------------------
   Price shortcode
----------------------------------------- */
.starel-standard-price{
  display:flex;
  align-items:center;
  gap:16px;
  flex-wrap:wrap;
  color:var(--starel-black);
  font-size:16px;
  font-weight:400;
  line-height:1.4;
}

.starel-standard-price__regular{
  color:#7A7A7A;
  text-decoration:line-through;
  text-decoration-thickness:1px;
  text-underline-offset:0.12em;
}

.starel-standard-price__current{
  color:var(--starel-black);
}

/* -----------------------------------------
   Purchase wrapper
----------------------------------------- */
.starel-standard-pdp{
  width:100%;
  display:flex;
  flex-direction:column;
  gap:24px;
}

.starel-standard-variation-panel{
  display:flex;
  flex-direction:column;
  gap:24px;
  width:100%;
}

.starel-standard-options{
  width:100%;
}

.starel-standard-options__heading{
  margin:0 0 14px;
  color:var(--starel-black);
  font-size:14px !important;
  font-weight:600 !important;
  letter-spacing:0.2px;
  line-height:1.2;
  text-transform:uppercase;
}

.starel-standard-options__grid{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:12px;
  width:100%;
}

button.starel-standard-option,
.elementor-kit-13 button.starel-standard-option{
  width:100%;
  min-height:54px;
  display:flex !important;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:14px 16px !important;
  border:1px solid var(--starel-grey-border) !important;
  border-radius:var(--starel-radius) !important;
  background:#fff !important;
  color:var(--starel-black) !important;
  box-shadow:none !important;
  cursor:pointer !important;
  text-align:left;
  font:inherit !important;
  font-size:14px !important;
  font-weight:400 !important;
  line-height:1.25 !important;
  text-transform:none !important;
  letter-spacing:0 !important;
  transition:border-color .18s ease, background-color .18s ease;
}

button.starel-standard-option:hover,
.elementor-kit-13 button.starel-standard-option:hover{
  border-color:var(--starel-black) !important;
  background:#fff !important;
  color:var(--starel-black) !important;
}

button.starel-standard-option.is-active,
.elementor-kit-13 button.starel-standard-option.is-active{
  border:1.33px solid var(--starel-black) !important;
  background:var(--starel-grey-fill) !important;
}

.starel-standard-option__label{
  display:block;
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.starel-standard-option__swatch{
  width:18px;
  height:18px;
  flex:0 0 18px;
  display:inline-block;
  border-radius:999px;
  border:1px solid #d9d9d9;
  background:var(--starel-option-colour, #f4f4f4);
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.03);
}

/* -----------------------------------------
   Stock
----------------------------------------- */
.starel-standard-stock-wrap{
  min-height:22px;
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:8px;
  color:#7A7A7A;
  font-size:14px;
  line-height:1.4;
}

.starel-standard-stock{
  color:#7A7A7A;
}

.starel-standard-stock--out{
  color:#7A7A7A;
}

button.starel-standard-backorder-trigger,
.elementor-kit-13 button.starel-standard-backorder-trigger{
  all:unset;
  color:var(--starel-black) !important;
  cursor:pointer !important;
  text-decoration:underline !important;
  text-underline-offset:0.1em !important;
  font-size:14px !important;
  line-height:1.4 !important;
}

/* -----------------------------------------
   Quantity + ATC stacked layout
   Matches the Border Mosaic piece-only PDP structure.
----------------------------------------- */
.starel-standard-cart-form{
  width:100%;
  margin:0;
  display:flex;
  flex-direction:column;
  gap:18px;
}

.starel-standard-buy-row{
  display:grid;
  grid-template-columns:1fr;
  gap:16px;
  align-items:stretch;
  width:100%;
}

.starel-standard-qty-control{
  width:100%;
  min-height:56px;
  display:grid;
  grid-template-columns:56px minmax(0, 1fr) 56px;
  align-items:center;
  border:1px solid var(--starel-black);
  border-radius:var(--starel-radius);
  background:#fff;
  overflow:hidden;
  box-sizing:border-box;
}

button.starel-standard-qty-btn,
.elementor-kit-13 button.starel-standard-qty-btn{
  min-width:0 !important;
  min-height:54px !important;
  width:56px !important;
  height:54px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  padding:0 !important;
  margin:0 !important;
  border:0 !important;
  border-radius:0 !important;
  background:transparent !important;
  color:var(--starel-black) !important;
  box-shadow:none !important;
  cursor:pointer !important;
  font-size:28px !important;
  font-weight:300 !important;
  line-height:1 !important;
  appearance:none !important;
  -webkit-appearance:none !important;
}

button.starel-standard-qty-btn:hover,
.elementor-kit-13 button.starel-standard-qty-btn:hover{
  background:transparent !important;
  color:var(--starel-black) !important;
}

.starel-standard-qty-input{
  width:100%;
  min-width:0;
  height:54px;
  padding:0;
  border:0 !important;
  background:transparent !important;
  color:var(--starel-black);
  text-align:center;
  font-size:20px;
  font-weight:600;
  line-height:54px;
  outline:none !important;
  box-shadow:none !important;
  appearance:textfield;
  -moz-appearance:textfield;
}

.starel-standard-qty-input::-webkit-outer-spin-button,
.starel-standard-qty-input::-webkit-inner-spin-button{
  -webkit-appearance:none;
  margin:0;
}

button.starel-standard-add-to-cart,
.elementor-kit-13 button.starel-standard-add-to-cart{
  width:100%;
  min-height:56px;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:4px;
  padding:14px 20px !important;
  border:1px solid var(--starel-black) !important;
  border-radius:var(--starel-radius) !important;
  background:var(--starel-black) !important;
  color:#fff !important;
  box-shadow:none !important;
  cursor:pointer !important;
  font-size:16px !important;
  font-weight:600 !important;
  line-height:1.2 !important;
  text-decoration:none !important;
  transition:opacity .18s ease;
}

button.starel-standard-add-to-cart:hover,
.elementor-kit-13 button.starel-standard-add-to-cart:hover{
  background:var(--starel-black) !important;
  color:#fff !important;
}

button.starel-standard-add-to-cart:disabled,
.elementor-kit-13 button.starel-standard-add-to-cart:disabled{
  opacity:.45;
  cursor:not-allowed !important;
}

.starel-standard-add-to-cart-label,
.starel-standard-total-output{
  color:#fff;
}

/* Full-width stacked purchase controls. */
.starel-standard-buy-row .starel-standard-qty-control,
.starel-standard-buy-row button.starel-standard-add-to-cart,
.elementor-kit-13 .starel-standard-buy-row button.starel-standard-add-to-cart{
  width:100% !important;
  max-width:none !important;
}

/* -----------------------------------------
   Responsive
----------------------------------------- */
@media (max-width:767px){
  .starel-standard-options__grid{
    grid-template-columns:1fr;
    gap:10px;
  }

  .starel-standard-buy-row{
    grid-template-columns:1fr;
    gap:16px;
  }

  .starel-standard-qty-control,
  button.starel-standard-add-to-cart,
  .elementor-kit-13 button.starel-standard-add-to-cart{
    min-height:52px;
  }

  .starel-standard-qty-control{
    grid-template-columns:54px minmax(0, 1fr) 54px;
  }

  button.starel-standard-qty-btn,
  .elementor-kit-13 button.starel-standard-qty-btn,
  .starel-standard-qty-input{
    height:50px !important;
    min-height:50px !important;
    line-height:50px;
  }
}

/* -----------------------------------------
   Category-specific standard PDP FAQs
   Elementor places WooCommerce product category classes on the
   product template wrapper, not always on <body>, so we support both.
----------------------------------------- */

/* Hide all standard PDP FAQ accordions by default. */
body.single-product .starel-standard-faq {
  display: none !important;
}

/* Fixing & Sealants
   Live category class currently uses product_cat-fixing-sealing.
   The product/category label still reads Fixing & Sealants, so the FAQ
   modifier can remain starel-standard-faq--fixing-sealants. */
body.single-product.product_cat-fixing-sealing .starel-standard-faq--fixing-sealants,
body.single-product.product_cat-fixing-sealants .starel-standard-faq--fixing-sealants,
body.single-product .elementor-location-single.product_cat-fixing-sealing .starel-standard-faq--fixing-sealants,
body.single-product .elementor-location-single.product_cat-fixing-sealants .starel-standard-faq--fixing-sealants,
body.single-product .product.product_cat-fixing-sealing .starel-standard-faq--fixing-sealants,
body.single-product .product.product_cat-fixing-sealants .starel-standard-faq--fixing-sealants {
  display: block !important;
}

/* Taps & Fixtures */
body.single-product.product_cat-taps-fixtures .starel-standard-faq--taps-fixtures,
body.single-product .elementor-location-single.product_cat-taps-fixtures .starel-standard-faq--taps-fixtures,
body.single-product .product.product_cat-taps-fixtures .starel-standard-faq--taps-fixtures {
  display: block !important;
}

/* Interior Stone Products */
body.single-product.product_cat-interior-stone-products .starel-standard-faq--interior-stone-products,
body.single-product .elementor-location-single.product_cat-interior-stone-products .starel-standard-faq--interior-stone-products,
body.single-product .product.product_cat-interior-stone-products .starel-standard-faq--interior-stone-products {
  display: block !important;
}

/* Bathroom Accessories */
body.single-product.product_cat-bathroom-accessories .starel-standard-faq--bathroom-accessories,
body.single-product .elementor-location-single.product_cat-bathroom-accessories .starel-standard-faq--bathroom-accessories,
body.single-product .product.product_cat-bathroom-accessories .starel-standard-faq--bathroom-accessories {
  display: block !important;
}