.elementor-2281 .elementor-element.elementor-element-52a219f{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--gap:10px 10px;--row-gap:10px;--column-gap:10px;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-2281 .elementor-element.elementor-element-a45ef10{--display:flex;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-2281 .elementor-element.elementor-element-c7c4ef6{--display:flex;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--padding-top:0%;--padding-bottom:0%;--padding-left:0%;--padding-right:0%;}.elementor-2281 .elementor-element.elementor-element-3393cd5{--display:flex;--padding-top:64px;--padding-bottom:64px;--padding-left:64px;--padding-right:64px;}.elementor-2281 .elementor-element.elementor-element-3393cd5.e-con{--flex-grow:0;--flex-shrink:0;}.elementor-2281 .elementor-element.elementor-element-b488768{--display:flex;--gap:10px 10px;--row-gap:10px;--column-gap:10px;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-2281 .elementor-element.elementor-element-ad4b11c .elementor-heading-title{font-family:"Inter", Sans-serif;font-size:16px;text-transform:uppercase;}.elementor-2281 .elementor-element.elementor-element-7c8bce6 .elementor-heading-title{color:var( --e-global-color-text );}.elementor-2281 .elementor-element.elementor-element-6999d3d > .elementor-widget-container{margin:0px 0px -20px 0px;padding:0px 0px 0px 0px;}.elementor-2281 .elementor-element.elementor-element-6999d3d{text-align:start;}.elementor-2281 .elementor-element.elementor-element-fd95f5f{width:100%;max-width:100%;}.elementor-2281 .elementor-element.elementor-element-fd95f5f > .elementor-widget-container{margin:5px 0px 0px 0px;}.elementor-2281 .elementor-element.elementor-element-fd95f5f .cart button, .elementor-2281 .elementor-element.elementor-element-fd95f5f .cart .button{font-weight:400;text-transform:uppercase;border-style:none;border-radius:2px 2px 2px 2px;padding:15px 30px 15px 30px;color:#FFFFFF;background-color:#00000075;transition:all 0.1s;}.elementor-2281 .elementor-element.elementor-element-fd95f5f .cart button:hover, .elementor-2281 .elementor-element.elementor-element-fd95f5f .cart .button:hover{color:#FFFFFF;}.elementor-2281 .elementor-element.elementor-element-6786073{--display:flex;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--margin-top:5px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-2281 .elementor-element.elementor-element-505e2b6 .elementor-tab-title{border-width:0px;padding:5px 0px 5px 0px;}.elementor-2281 .elementor-element.elementor-element-505e2b6 .elementor-tab-content{border-width:0px;padding:10px 0px 20px 0px;}.elementor-2281 .elementor-element.elementor-element-505e2b6 .elementor-toggle-item:not(:last-child){margin-block-end:0px;}.elementor-2281 .elementor-element.elementor-element-505e2b6 .elementor-toggle-title{font-weight:300;}.elementor-2281 .elementor-element.elementor-element-fa76142{width:auto;max-width:auto;}.elementor-2281 .elementor-element.elementor-element-fa76142.elementor-element{--align-self:flex-start;}.elementor-2281 .elementor-element.elementor-element-fa76142 .elementor-tab-title{border-width:0px;padding:5px 0px 5px 0px;}.elementor-2281 .elementor-element.elementor-element-fa76142 .elementor-tab-content{border-width:0px;padding:10px 0px 20px 0px;}.elementor-2281 .elementor-element.elementor-element-fa76142 .elementor-toggle-item:not(:last-child){margin-block-end:0px;}.elementor-2281 .elementor-element.elementor-element-fa76142 .elementor-toggle-title{font-weight:300;text-transform:uppercase;}.elementor-2281 .elementor-element.elementor-element-7adfc0f{--display:flex;--gap:10px 10px;--row-gap:10px;--column-gap:10px;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:5px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-2281 .elementor-element.elementor-element-7d056e2 .elementor-heading-title{font-weight:300;}.elementor-2281 .elementor-element.elementor-element-d0d067e{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-2281 .elementor-element.elementor-element-ba3da52{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--gap:10px 10px;--row-gap:10px;--column-gap:10px;--margin-top:64px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-2281 .elementor-element.elementor-element-a6a7958 > .elementor-widget-container{margin:0px 0px 0px 0px;padding:0px 0px 0px 0px;}.elementor-2281 .elementor-element.elementor-element-a6a7958{text-align:center;}.elementor-2281 .elementor-element.elementor-element-a6a7958 .elementor-heading-title{font-size:10px;font-weight:400;text-transform:uppercase;}@media(max-width:767px){.elementor-2281 .elementor-element.elementor-element-a45ef10{--gap:5px 5px;--row-gap:5px;--column-gap:5px;--flex-wrap:wrap;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-2281 .elementor-element.elementor-element-c7c4ef6{--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-2281 .elementor-element.elementor-element-3393cd5{--padding-top:10px;--padding-bottom:10px;--padding-left:10px;--padding-right:10px;}.elementor-2281 .elementor-element.elementor-element-b488768{--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;}.elementor-2281 .elementor-element.elementor-element-505e2b6 .elementor-tab-content{padding:10px 0px 10px 0px;}.elementor-2281 .elementor-element.elementor-element-f659655 > .elementor-widget-container{margin:0px -10px 0px -10px;}.elementor-2281 .elementor-element.elementor-element-ba3da52{--margin-top:10px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;}.elementor-2281 .elementor-element.elementor-element-a6a7958 > .elementor-widget-container{padding:0px 10px 0px 10px;}.elementor-2281 .elementor-element.elementor-element-a6a7958{text-align:start;}}@media(min-width:768px){.elementor-2281 .elementor-element.elementor-element-52a219f{--content-width:1600px;}.elementor-2281 .elementor-element.elementor-element-c7c4ef6{--width:50%;}.elementor-2281 .elementor-element.elementor-element-3393cd5{--width:50%;}}/* Start custom CSS for container, class: .elementor-element-a45ef10 */div#elementor-tab-content-8421 p:first-child {
    margin-bottom: 10px;
}

.elementor-tab-content p {
    margin: 0;
}

.single_add_to_cart_button {
    display: flex !important;
    justify-content: space-between !important;
    padding-left: 20px !important;
    padding-right: 20px !important;
}

.woocommerce-variation-price {
    display: none;
}

.woo-variation-swatches .variable-items-wrapper .variable-item:not(.radio-variable-item) {
    background-color: #faf9f6 !important;
}

table.variations th {
    display: none !important;
}

.woocommerce-variation-price {
    margin-bottom: 20px;
    color: #000 !important;
}

.woocommerce-variation-price span {
    color: #000 !important;
}

table.variations {
    padding: 0 !important;
    margin: 0 !important;
}

button.single_add_to_cart_button {
background-color: rgba(60, 50, 45, 0.7) !important; /* Dark brownish-grey with 70% opacity */
    -webkit-backdrop-filter: blur(20px) !important; /* Background ko dhundla karne ke liye */
    backdrop-filter: blur(20px) !important;
    
    transition: all 0.1s ease !important;
    opacity: 1 !important;
}

button.single_add_to_cart_button:hover {
background-color: rgba(60, 50, 45, 0.9) !important;
}

a.reset_variations {
    opacity: 0;
}


table.variations td.value {
    background-color: #FAF9F6 !important;
    padding-top: 0 !important;
}

.woocommerce-variation-price {
    font-family: "Oswald", Sans-serif;
}

.woocommerce-variation-price span {
    font-size: 15px;
    font-weight: 800;
    font-family: "Oswald", Sans-serif;
}

.elementor-widget-woocommerce-product-price p.price {
    display: flex;
    gap: 5px;
}

/*.prod-accord a.elementor-toggle-title:hover {*/
/*    text-decoration: underline;*/
/*}*/

.prod-accord .elementor-toggle-icon i {
    font-size: 8px;
}

.prod-accord .elementor-toggle-icon i {
    font-size: 8px;
}

.prod-accord .elementor-tab-title {
    justify-content: start !important;
    display: flex;
    flex-direction: row-reverse;
    gap: 5px;
}

/* Simple Grid Gallery */
.simple-grid-gallery {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.simple-grid-gallery .simple-grid-item {
    flex: 1 1 calc(50% - 10px); /* 2 columns desktop */
    box-sizing: border-box;
}
table.variations tr:last-child td {
    padding-bottom: 0;
}

/* Mobile */
@media (max-width: 768px) {
    .simple-grid-gallery .simple-grid-item {
        flex: 1 1 100%; /* 1 column mobile */
    }
}/* End custom CSS */
/* Start custom CSS *//* Single Product template (2281) — instance custom CSS, synced into
   _elementor_page_settings[custom_css]. COLLECT button styling; label swap
   lives in inc/woocommerce/product.php. */

/* "COLLECT" button = the single-product add-to-cart button (label swapped to
   COLLECT + price via inc/woocommerce/product.php). It's the last button not
   matching the identity: the Elementor add-to-cart widget styles it with rounded
   corners. Force it to the app button, like its siblings #open-contact-popup /
   #submit-btn. High specificity + !important to beat the widget's generated CSS. */
.single-product button.single_add_to_cart_button,
.single-product
  .elementor-widget-woocommerce-product-add-to-cart
  button.single_add_to_cart_button,
.woocommerce div.product form.cart button.single_add_to_cart_button {
  background-color: rgba(0, 0, 0, 0.7) !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  color: #fff !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  text-transform: uppercase;
  letter-spacing: 1px;
  transition:
    background 0.15s ease,
    color 0.15s ease;
}
.single-product button.single_add_to_cart_button:hover,
.single-product
  .elementor-widget-woocommerce-product-add-to-cart
  button.single_add_to_cart_button:hover,
.woocommerce div.product form.cart button.single_add_to_cart_button:hover {
  background-color: rgba(0, 0, 0, 0.85) !important;
  color: #fff !important;
}
/* Made-to-measure block (inc/woocommerce/bespoke.php) — renders inside the
   add-to-cart form, above the COLLECT button. Same idiom as the inquiry popup:
   11px, uppercase micro-title, black accents, underline-only textarea. */

/* Elementor Pro's add-to-cart widget lays the form row out as
   display:flex; flex-wrap:nowrap (widget-woocommerce-product-add-to-cart.css —
   `.woocommerce-variation-add-to-cart` on variable products, form.cart itself on
   simple ones), which crams the bespoke block, quantity and COLLECT into one
   row. Let the row wrap and give the block the full width, so it sits on its
   own line above quantity + button. !important to beat the widget CSS, same as
   the COLLECT rules above. */
.woocommerce div.product form.cart .woocommerce-variation-add-to-cart,
.woocommerce div.product form.cart:not(.grouped_form):not(.variations_form) {
  flex-wrap: wrap !important;
}
/* Spacing inside the adjustments block uses one three-step scale — 0 / 5px /
   10px. Every gap, padding and reveal margin below picks from those three. */
.bk-bespoke {
  flex-basis: 100%;
  width: 100%;
  margin: 0 0 10px 0;
}
/* The MADE TO MEASURE row reads as one more product-detail accordion header
   (.prod-accord below it): same inherited body size, weight 300, 5px 0 row
   padding, control pinned right where their chevron sits. Only the revealed
   form drops to the 10px micro-scale. */
.bk-bespoke-toggle {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 0;
  cursor: pointer;
  font-weight: 300;
  text-transform: uppercase;
}
/* The checkbox is still the control (label-wrapped, focusable, posts with the
   form) — only its box is taken out of sight, with the chevron pair standing in
   where the accordions put their .elementor-toggle-icon. Clipped rather than
   display:none so it keeps keyboard focus. */
.bk-bespoke-toggle input[type="checkbox"] {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: 0;
  padding: 0;
  border: 0;
  clip-path: inset(50%);
  overflow: hidden;
  white-space: nowrap;
}
.bk-bespoke-toggle-text {
  order: 1;
}
.bk-bespoke-toggle-icon {
  order: 2;
  line-height: 1;
}
/* 8px matches the .prod-accord chevrons — that size is an Elementor toggle-widget
   icon setting living in the template's _elementor_data (compiled out to
   `.prod-accord .elementor-toggle-icon i{font-size:8px}`), so it can't be
   inherited from here and is restated instead. Without it the chevrons render at
   the label's inherited body size and dwarf the accordions'. */
.bk-bespoke-toggle-icon i {
  font-size: 8px;
}
.bk-bespoke-toggle-icon .fa-chevron-down,
.bk-bespoke-toggle
  input[type="checkbox"]:checked
  ~ .bk-bespoke-toggle-icon
  .fa-chevron-right {
  display: none;
}
.bk-bespoke-toggle
  input[type="checkbox"]:checked
  ~ .bk-bespoke-toggle-icon
  .fa-chevron-down {
  display: inline-block;
}
.bk-bespoke-toggle
  input[type="checkbox"]:focus-visible
  ~ .bk-bespoke-toggle-icon {
  outline: 1px solid #000;
  outline-offset: 3px;
}
@media (hover: hover) {
  .bk-bespoke-toggle:hover {
    text-decoration: underline;
  }
}
/* Reveal slides open like the .prod-accord toggles below it (Elementor runs
   those through jQuery slideDown — 400ms, swing). grid-template-rows 0fr -> 1fr
   animates to the content's own height with no measured max-height; the inner
   wrapper carries the overflow. margin-top rides along so the collapsed state
   takes no vertical space at all. visibility keeps the collapsed fields out of
   the tab order — it flips to visible at the start of the open and back only at
   the end of the close. */
.bk-bespoke-form {
  display: grid;
  grid-template-rows: 0fr;
  margin-top: 0;
  visibility: hidden;
  font-size: 10px;
  transition:
    grid-template-rows 0.4s ease-in-out,
    margin-top 0.4s ease-in-out,
    visibility 0.4s;
}
.bk-bespoke-form.is-open {
  grid-template-rows: 1fr;
  margin-top: 10px;
  visibility: visible;
}
.bk-bespoke-form-inner {
  min-height: 0;
  overflow: hidden;
}
@media (prefers-reduced-motion: reduce) {
  .bk-bespoke-form {
    transition: none;
  }
}
.bk-bespoke-element {
  padding: 5px 0;
}
/* The 5px is the gap BETWEEN elements — it splits across the hairline rule. At
   the two ends there is no neighbour, so the block sits flush with the reveal's
   own edges instead of carrying half a gap. */
.bk-bespoke-element:first-child {
  padding-top: 0;
}
.bk-bespoke-element:last-child {
  padding-bottom: 0;
}
.bk-bespoke-element + .bk-bespoke-element {
  border-top: 1px solid rgba(0, 0, 0, 0.15);
}
.bk-bespoke-element-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}
.bk-bespoke-element-name {
  text-transform: uppercase;
  letter-spacing: 1px;
}
.bk-bespoke-ops {
  display: flex;
  flex-wrap: wrap;
  gap: 5px 10px;
}
/* Operations read like the popup facet lists (.facetwp-checkbox / the Status,
   Collection, Collaboration radios — see inc/elementor-widgets/assets/
   shop-filter-bar.css, and .ck-sort-item in 4496-sort-popup.css): no control
   glyph at all, uppercase black text, the picked one underlined. The radio is
   still the control and still focusable — clipped, not display:none, same as the
   MADE TO MEASURE checkbox above. Kept in a wrapping row (not stacked) because
   an element's operations are a short horizontal set, like the refine bar. */
.bk-bespoke-ops label {
  position: relative;
  display: block;
  cursor: pointer;
  color: #000;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.bk-bespoke-ops input[type="radio"] {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: 0;
  padding: 0;
  border: 0;
  clip-path: inset(50%);
  overflow: hidden;
  white-space: nowrap;
}
.bk-bespoke-ops label:has(input[type="radio"]:checked) {
  text-decoration: underline;
}
/* Pointer devices only — on touch a tap latches :hover, so a just-pressed
   option would stay underlined and read as picked (same reason as .ck-sort-item). */
@media (hover: hover) {
  .bk-bespoke-ops label:hover {
    text-decoration: underline;
  }
}
.bk-bespoke-ops label:has(input[type="radio"]:focus-visible) {
  outline: 1px solid #000;
  outline-offset: 3px;
}
/* Measurement box slides in on the same 400ms grid-rows reveal as the block
   above; the margin rides along so a collapsed row takes no extra space.
   visibility keeps the hidden input out of the tab order (it is also not
   `required` while collapsed — see syncRow — so it can never block submit). */
.bk-bespoke-note-wrap {
  display: grid;
  grid-template-rows: 0fr;
  margin-top: 0;
  visibility: hidden;
  transition:
    grid-template-rows 0.4s ease-in-out,
    margin-top 0.4s ease-in-out,
    visibility 0.4s;
}
.bk-bespoke-note-wrap.is-open {
  grid-template-rows: 1fr;
  margin-top: 5px;
  visibility: visible;
}
.bk-bespoke-note-inner {
  min-height: 0;
  overflow: hidden;
}
@media (prefers-reduced-motion: reduce) {
  .bk-bespoke-note-wrap {
    transition: none;
  }
}
.bk-bespoke-note {
  width: 100%;
  padding: 5px 0;
  border: none;
  border-bottom: 1px solid #000;
  border-radius: 0;
  background: transparent;
  outline: none;
  box-sizing: border-box;
  font-size: 10px;
  color: #000;
}
/* Consent modal — opened by the COLLECT submit when made-to-measure is active.
   Same shell as the contact popup (#contact-popup). */
.bk-bespoke-modal {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 99999;
  background: rgba(0, 0, 0, 0.6);
  font-size: 11px;
  color: #000;
}
.bk-bespoke-modal-panel {
  max-width: 400px;
  width: 90%;
  margin: 120px auto;
  background: #f5f5f5;
  padding: 30px;
  box-sizing: border-box;
}
.bk-bespoke-modal-title {
  font-size: 10px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: #888;
  margin-bottom: 12px;
}
.bk-bespoke-modal p {
  margin: 0 0 20px;
  line-height: 1.6;
}
.bk-bespoke-modal-actions {
  display: flex;
  gap: 10px;
}
.bk-bespoke-modal-actions button {
  flex: 1;
  padding: 12px;
  font-size: 11px;
  letter-spacing: 1px;
  text-transform: uppercase;
  border: none;
  border-radius: 0;
  cursor: pointer;
  transition: background 0.15s ease;
}
#bk-bespoke-cancel {
  background: transparent;
  color: #000;
  border: 1px solid #000;
}
#bk-bespoke-confirm {
  background: rgba(0, 0, 0, 0.7);
  color: #fff;
}
#bk-bespoke-confirm:hover {
  background: rgba(0, 0, 0, 0.85);
}

/* STYLED WITH (container 7adfc0f: heading + loop grid) collapses entirely when
   the design has no Upsells set (Design data → Linked Designs). inc/woocommerce/product.php adds
   .bk-no-styled-with to <body> in that case — display:none takes the heading and
   the container's own padding with it, which is why the whole container is
   targeted rather than the grid. */
body.bk-no-styled-with .elementor-element-7adfc0f {
  display: none !important;
}

/* In stock = [collect_button] prints nothing, but its shortcode widget (e6ad3dd)
   still lays out — an empty .elementor-shortcode plus the flex gap of the column
   it sits in, i.e. a stray vertical gap under COLLECT on every in-stock design.
   Collapse the widget unless it actually rendered the CTA. Keyed on the button
   rather than the .in-stock body class (inc/woocommerce/product.php) because the
   two can disagree: a variable design can be in stock overall while every
   variation is out, which is exactly when the CTA does render. */
.single-product .elementor-element-e6ad3dd:not(:has(.bk-contact-cta)) {
  display: none !important;
}

/* Archived products get no add-to-cart button; [collect_button]
   (inc/woocommerce/product.php) renders this CTA in its slot instead, opening the
   inquiry popup on the custom-piece intent. Matches the COLLECT identity above.
   Own class, not #open-contact-popup — that id belongs to the inline
   "ask about product" toggle, which Customizer CSS styles as a plain text link. */
.single-product button.bk-contact-cta {
  display: block;
  width: 100%;
  padding: 15px 30px;
  background-color: rgba(0, 0, 0, 0.7);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  color: #fff;
  border: none;
  border-radius: 0;
  box-shadow: none;
  cursor: pointer;
  line-height: 1;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 1px;
  transition: background 0.15s ease;
}
.single-product button.bk-contact-cta:hover {
  background-color: rgba(0, 0, 0, 0.85);
  color: #fff;
}

/* Swapped-in label spans inherit white; pin them in case the widget colours spans. */
.single_add_to_cart_button .btn-text,
.single_add_to_cart_button .btn-price {
  color: #fff !important;
}

/* ---------------------------------------------------------------------------
   Product detail accordions (.prod-accord — COMPOSITION & CONSTRUCTION,
   ARCHIVAL CARE; content comes from [bk_product_detail], see
   inc/woocommerce/product-details.php).

   Elementor markup puts the icon span BEFORE the title anchor and pushes it over
   with `float:right`, which parks it at the end of the *text line* rather than the
   row. Lay the row out as flex instead and reorder, so the chevron is pinned to
   the container's right edge whatever the title length.

   `.chart` ("ask about this product") is excluded: that toggle is width:auto, so
   space-between would have nothing to distribute.

   NOTE: widget-level Custom CSS on container a45ef10 (Elementor Advanced tab —
   NOT covered by custom-code/sync.php) sets `flex-direction: row-reverse` and
   `justify-content: start !important` on this same rule target. That `!important`
   outranks a plain declaration here, so these two must carry it too. Delete that
   widget block and the !important below can go with it. */
.prod-accord:not(.chart) .elementor-tab-title {
  display: flex;
  align-items: center;
  flex-direction: row !important;
  justify-content: space-between !important;
  gap: 10px;
}
.prod-accord:not(.chart) .elementor-tab-title .elementor-toggle-icon {
  order: 2;
  float: none;
  width: auto;
  text-align: right;
}
.prod-accord:not(.chart) .elementor-tab-title .elementor-toggle-title {
  order: 1;
}

/* Underline follows the whole row, not just the words. The global
   `a.elementor-toggle-title:hover` rule in customizer/additional-css.css still
   covers toggles elsewhere on the site. */
@media (hover: hover) {
  .prod-accord .elementor-tab-title:hover .elementor-toggle-title {
    text-decoration: underline;
  }
}

/* Touch targets (<768px). The detail toggles stack with no gap between them —
   the widgets' Elementor settings give each header `padding:5px 0` and each
   toggle item `margin-block-end:0` — so three ~24px-tall rows (COMPOSITION &
   CONSTRUCTION, ARCHIVAL CARE, ask about product, plus MADE TO MEASURE in the
   cart form above) sit edge to edge and a thumb lands between two of them.
   Give every one of them the 44px minimum instead: the extra height comes from
   padding, so the rows also read further apart, and the tap zone still ends
   exactly where the next row's begins — no overlap.

   !important because the padding is a widget SETTING, compiled to
   `.elementor-2281 .elementor-element.elementor-element-505e2b6
   .elementor-tab-title` (4 classes) — out-specifying this file's `.prod-accord`
   body.elementor-page-2281 regardless of source order. Same reason as the flex rules above. */
@media (max-width: 767px) {
  .prod-accord .elementor-tab-title {
    box-sizing: border-box;
    min-height: 44px;
    padding-top: 13px !important;
    padding-bottom: 13px !important;
  }
  /* `.chart` is excluded from the flex rule above (it is width:auto), so it
     needs its own centering for the taller box not to top-align the text. */
  .prod-accord.chart .elementor-tab-title {
    display: flex;
    align-items: center;
  }
  /* …and the whole row has to be the target, not just the words. The popup's
     click trigger is `#open-contact-popup`, which sits on this WIDGET WRAPPER
     (product-contact-popup-shortcode.php binds it), and the widget is
     shrink-wrapped to the text by its width:auto setting — so a tap beside the
     label hits nothing. Full width here makes the wrapper (and the tab-title
     filling it) span the column, matching the accordion headers above.
     Beats `.elementor-2281 .elementor-element.elementor-element-fa76142`
     (3 classes) and Elementor's `.elementor-widget__width-auto`. */
  .single-product .elementor-element.prod-accord.chart {
    width: 100% !important;
    max-width: 100% !important;
  }
  /* MADE TO MEASURE — already a centered flex row, only the height is missing.
     Kept identical to the accordions it visually belongs to. */
  .bk-bespoke-toggle {
    min-height: 44px;
  }
}

/* ---------------------------------------------------------------------------
   Desktop product row (e-a45ef10, flex-direction:row): a 60% LEFT image column
   (e-c7c4ef6 → gallery widget e-70f095e, the .cpg stack) beside a 40% RIGHT info
   column (e-3393cd5: title/price/COLLECT/details), with the images laid out two
   per row. Desktop only (≥768px); below that the columns stack and the gallery
   keeps its own mobile swipe/snap.

   NOTE: the independent internal-scroll of the image column (clamp images to the
   info-column height + scroll them internally with the scrollbar hidden) is
   currently DISABLED — see the commented-out block below. With it off, the images
   flow normally and the row is as tall as the (two-per-row) image grid again. */
@media (min-width: 768px) {
  /* Column split: 60% images / 40% details (was 50/50). Overriding `width`
     directly (not Elementor's --width var) beats `width:var(--width)` regardless
     of breakpoint plumbing. The row keeps flex-shrink:1, so the 5px column gap is
     absorbed and both stay on one line at the 60/40 ratio. */
  .elementor-element-c7c4ef6 {
    width: 60% !important;
  }
  .elementor-element-3393cd5 {
    width: 40% !important;
  }

  /* Two images per row. The gallery widget's own #cpg-<id> rule sets the stack to
     a single flex column; override to a 2-col grid (higher-specificity ID rule →
     !important on display). `gap` from the widget setting is inherited (works for
     grid too); align-items:start keeps each image top-aligned when the two cells
     in a row differ in height. */
  .elementor-element-c7c4ef6 .cpg-stack {
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    align-items: start;
  }

  /* DISABLED — independent internal-scroll of the image column. Uncomment this
     block to clamp the images to the info-column height and scroll them inside
     their own column (scrollbar hidden), so the page reaches the next section
     without scrolling past every image. (Inline comments removed so this stays a
     single valid CSS comment.)

  .elementor-element-c7c4ef6 {
    position: relative;
    align-self: stretch !important;
    overflow: hidden;
  }
  .elementor-element-c7c4ef6 > .elementor-element-70f095e {
    position: absolute;
    inset: 0;
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: none;
    -ms-overflow-style: none;
  }
  .elementor-element-c7c4ef6 > .elementor-element-70f095e::-webkit-scrollbar {
    display: none;
  }
  .elementor-element-a45ef10 {
    align-items: stretch !important;
  }
  */
}/* End custom CSS */