.elementor-2330 .elementor-element.elementor-element-943841f{--display:flex;--padding-top:100px;--padding-bottom:100px;--padding-left:0px;--padding-right:0px;}.elementor-2330 .elementor-element.elementor-element-9c6203f{--display:flex;--justify-content:center;--align-items:center;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--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-2330 .elementor-element.elementor-element-ea45cc9{width:100%;max-width:100%;margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;padding:0px 0px 0px 0px;}.elementor-2330 .elementor-element.elementor-element-ea45cc9.elementor-element{--align-self:center;}.elementor-2330 .elementor-element.elementor-element-e5e6766{--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-2330 .elementor-element.elementor-element-af8408b{--display:flex;}.elementor-2330 .elementor-element.elementor-element-86f4618{z-index:1;}.elementor-2330 .elementor-element.elementor-element-075ff35{--display:flex;--padding-top:20px;--padding-bottom:20px;--padding-left:20px;--padding-right:20px;}.elementor-2330 .elementor-element.elementor-element-1174bb1 .woocommerce-breadcrumb{color:#3A3F47;font-family:"Poppins", Sans-serif;font-size:13px;font-weight:400;}.elementor-2330 .elementor-element.elementor-element-1174bb1 .woocommerce-breadcrumb > a{color:#3A3F47;}.elementor-2330 .elementor-element.elementor-element-11d0ce2{margin:-20px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;}.woocommerce .elementor-2330 .elementor-element.elementor-element-11d0ce2 .star-rating{color:#F5A623;}.woocommerce .elementor-2330 .elementor-element.elementor-element-11d0ce2 .woocommerce-review-link{color:#6B7079;}.elementor-2330 .elementor-element.elementor-element-9c5c014 .elementor-heading-title{font-family:"Open Sans", Sans-serif;font-size:28px;font-weight:700;color:var( --e-global-color-primary );}.woocommerce .elementor-2330 .elementor-element.elementor-element-3eeb6aa .price{color:var( --e-global-color-accent );font-family:"Roboto", Sans-serif;font-size:22px;font-weight:800;font-style:italic;}.woocommerce .elementor-2330 .elementor-element.elementor-element-3eeb6aa .price ins{color:var( --e-global-color-accent );}.elementor-2330 .elementor-element.elementor-element-6f44956 .cart button, .elementor-2330 .elementor-element.elementor-element-6f44956 .cart .button{font-family:"Open Sans", Sans-serif;font-size:16px;font-weight:600;padding:13px 20px 13px 20px;color:#FFFFFF;background-color:var( --e-global-color-accent );transition:all 0.2s;}.elementor-2330 .elementor-element.elementor-element-6f44956 .cart button:hover, .elementor-2330 .elementor-element.elementor-element-6f44956 .cart .button:hover{color:#FFFFFF;background-color:var( --e-global-color-primary );}.elementor-2330 .elementor-element.elementor-element-6f44956{--button-spacing:10px;}.elementor-2330 .elementor-element.elementor-element-6f44956 .quantity .qty{color:var( --e-global-color-primary );background-color:#FFFFFF;transition:all 0.2s;}.elementor-2330 .elementor-element.elementor-element-6f44956 .quantity .qty:focus{color:var( --e-global-color-primary );background-color:#FFFFFF;}.woocommerce .elementor-2330 .elementor-element.elementor-element-6f44956 form.cart table.variations label{color:var( --e-global-color-primary );}.woocommerce .elementor-2330 .elementor-element.elementor-element-6f44956 form.cart table.variations td.value select{color:#3A3F47;}.woocommerce .elementor-2330 .elementor-element.elementor-element-6f44956 form.cart table.variations td.value select, .woocommerce .elementor-2330 .elementor-element.elementor-element-6f44956 form.cart table.variations td.value:before{background-color:#FFFFFF;border:1px solid #3A3F47;}.elementor-2330 .elementor-element.elementor-element-019c14a{--display:flex;--flex-direction:row;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--justify-content:flex-start;--align-items:center;--gap:12px 12px;--row-gap:12px;--column-gap:12px;--margin-top:10px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-2330 .elementor-element.elementor-element-ba8affb .elementor-heading-title{font-family:"Open Sans", Sans-serif;font-size:14px;font-weight:500;color:var( --e-global-color-primary );}.elementor-2330 .elementor-element.elementor-element-da65c84 .elementor-heading-title{font-family:"Open Sans", Sans-serif;font-size:14px;font-weight:500;color:var( --e-global-color-primary );}.woocommerce .elementor-2330 .elementor-element.elementor-element-5650eef .woocommerce-product-details__short-description{color:var( --e-global-color-primary );font-size:15px;font-weight:400;}.elementor-2330 .elementor-element.elementor-element-f5747b7{--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;--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-2330 .elementor-element.elementor-element-da26ba7.elementor-element{--align-self:center;}.elementor-2330 .elementor-element.elementor-element-da26ba7 .elementor-heading-title{font-family:"Poppins", Sans-serif;font-size:16px;font-weight:400;color:var( --e-global-color-primary );}.elementor-2330 .elementor-element.elementor-element-cd5ed24{--grid-side-margin:0px;--grid-column-gap:0px;--grid-row-gap:10px;--grid-bottom-margin:10px;--e-share-buttons-primary-color:#FFFFFF;--e-share-buttons-secondary-color:#6B7079;}.elementor-2330 .elementor-element.elementor-element-cd5ed24 .elementor-share-btn:hover{--e-share-buttons-primary-color:#FFFFFF;--e-share-buttons-secondary-color:var( --e-global-color-primary );}.elementor-2330 .elementor-element.elementor-element-e66736f{--display:flex;--padding-top:10px;--padding-bottom:50px;--padding-left:0px;--padding-right:0px;}.elementor-2330 .elementor-element.elementor-element-b993e52{--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-2330 .elementor-element.elementor-element-97da3f6{--display:flex;}.elementor-2330 .elementor-element.elementor-element-bc7527f{color:var( --e-global-color-primary );}.elementor-2330 .elementor-element.elementor-element-6963df2{--display:flex;}.woocommerce .elementor-2330 .elementor-element.elementor-element-828e099 h2{color:var( --e-global-color-primary );font-size:32px;font-weight:600;}.elementor-2330 .elementor-element.elementor-element-2301dc5{--display:flex;}.elementor-2330 .elementor-element.elementor-element-8896e41{--n-tabs-heading-wrap:wrap;--n-tabs-heading-overflow-x:initial;--n-tabs-title-white-space:initial;--n-tabs-title-border-radius:5px 5px 5px 5px;--n-tabs-title-font-size:14px;}.elementor-2330 .elementor-element.elementor-element-8896e41 > .e-n-tabs > .e-n-tabs-heading > .e-n-tab-title[aria-selected='false']:not( :hover ){background:#02182B;}.elementor-2330 .elementor-element.elementor-element-8896e41.elementor-widget-n-tabs > .e-n-tabs[data-touch-mode='false'] > .e-n-tabs-heading > .e-n-tab-title[aria-selected="false"]:hover{background:#CF5C36;}.elementor-2330 .elementor-element.elementor-element-8896e41.elementor-widget-n-tabs > .e-n-tabs > .e-n-tabs-heading > .e-n-tab-title[aria-selected="true"], .elementor-2330 .elementor-element.elementor-element-8896e41.elementor-widget-n-tabs > .e-n-tabs[data-touch-mode='true'] > .e-n-tabs-heading > .e-n-tab-title[aria-selected="false"]:hover{background:var( --e-global-color-accent );}.elementor-2330 .elementor-element.elementor-element-8896e41.elementor-widget-n-tabs > .e-n-tabs > .e-n-tabs-heading > :is( .e-n-tab-title > .e-n-tab-title-text, .e-n-tab-title ){font-family:"Open Sans", Sans-serif;font-weight:600;}.elementor-2330 .elementor-element.elementor-element-788e7fe{--display:flex;}@media(max-width:1200px){.elementor-2330 .elementor-element.elementor-element-943841f{--padding-top:100px;--padding-bottom:100px;--padding-left:20px;--padding-right:20px;}.elementor-2330 .elementor-element.elementor-element-e66736f{--padding-top:10px;--padding-bottom:50px;--padding-left:20px;--padding-right:20px;}}@media(max-width:1024px){.elementor-2330 .elementor-element.elementor-element-943841f{--padding-top:50px;--padding-bottom:50px;--padding-left:20px;--padding-right:20px;} .elementor-2330 .elementor-element.elementor-element-cd5ed24{--grid-side-margin:0px;--grid-column-gap:0px;--grid-row-gap:10px;--grid-bottom-margin:10px;}}@media(max-width:767px){.elementor-2330 .elementor-element.elementor-element-943841f{--padding-top:50px;--padding-bottom:50px;--padding-left:10px;--padding-right:10px;}.elementor-2330 .elementor-element.elementor-element-ea45cc9{width:100%;max-width:100%;} .elementor-2330 .elementor-element.elementor-element-cd5ed24{--grid-side-margin:0px;--grid-column-gap:0px;--grid-row-gap:10px;--grid-bottom-margin:10px;}}/* Start custom CSS for woocommerce-product-images, class: .elementor-element-86f4618 */.elementor-2330 .elementor-element.elementor-element-86f4618 ol{
    display: none;
}/* End custom CSS */
/* Start custom CSS for woocommerce-product-price, class: .elementor-element-3eeb6aa *//* Old price — muted, clearly secondary */
.elementor-2330 .elementor-element.elementor-element-3eeb6aa del,
.elementor-2330 .elementor-element.elementor-element-3eeb6aa del * {
    text-decoration-color: #8a8f98 !important;
    color: #8a8f98 !important;
}

/* New price — accent, draws the eye */
.elementor-2330 .elementor-element.elementor-element-3eeb6aa ins,
.elementor-2330 .elementor-element.elementor-element-3eeb6aa ins * {
    text-decoration-color: #cf5c36 !important;
    color: #cf5c36 !important;
}/* End custom CSS */
/* Start custom CSS for woocommerce-product-add-to-cart, class: .elementor-element-6f44956 */.elementor-2330 .elementor-element.elementor-element-6f44956 span, .elementor-2330 .elementor-element.elementor-element-6f44956 small, .elementor-2330 .elementor-element.elementor-element-6f44956 .stock {
    color: #cf5c36;
    font-weight: 700;
    line-height: 2;
    font-family: 'Roboto', sans-serif !important;
    font-size: 22px;
    font-style: italic;
    letter-spacing: 0.01em !important;
}

/* Old price — muted, clearly secondary */
.elementor-2330 .elementor-element.elementor-element-6f44956 del,
.elementor-2330 .elementor-element.elementor-element-6f44956 del * {
    text-decoration-color: #8a8f98 !important;
    color: #8a8f98 !important;
}

/* New price — accent, draws the eye */
.elementor-2330 .elementor-element.elementor-element-6f44956 ins,
.elementor-2330 .elementor-element.elementor-element-6f44956 ins * {
    text-decoration-color: #cf5c36 !important;
    color: #cf5c36 !important;
}

a.reset_variations {
    font-family: 'Roboto', sans-serif !important;
    color: #8a8f98; 
    font-size: 13px;
    font-weight: 400;
    text-decoration: none;
    letter-spacing: 0.01em !important;
    
}

a.reset_variations:hover {
    color: #CF5C36;
}

@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap');/* End custom CSS */
/* Start custom CSS for heading, class: .elementor-element-ba8affb */.elementor-heading-title a {
    color: #CF5C36 !important;
    text-decoration: none !important;
}

.elementor-heading-title a:hover {
    color: #02182B !important;
}/* End custom CSS */
/* Start custom CSS for heading, class: .elementor-element-da65c84 */.elementor-heading-title a {
    color: #CF5C36 !important;
    text-decoration: none !important;
}

.elementor-heading-title a:hover {
    color: #02182B !important;
}/* End custom CSS */
/* Start custom CSS for woocommerce-product-content, class: .elementor-element-bc7527f *//* ===== Main heading — unchanged, your existing hack works fine ===== */
.elementor-widget-woocommerce-product-content h4:first-of-type {
    font-size: 0 !important;
}
.elementor-widget-woocommerce-product-content h4:first-of-type::before {
    content: "Product Description";
    display: block;
    font-size: 32px;
    font-family: "Open Sans", sans-serif;
    font-weight: 700;
    color: #02182B;
    margin-bottom: 20px;
}

/* ===== Body paragraphs — consistent spacing + readable line-height ===== */
.elementor-widget-woocommerce-product-content p {
    margin: 0 0 16px 0 !important;
    line-height: 1.7;
    font-size: 15px;
    color: #3a3f47;
}

/* ===== Sub-headings (Key Features, Why Choose This Product, etc.) =====
   Targets every h4 EXCEPT the first one, which is already handled above */
.elementor-widget-woocommerce-product-content h4:not(:first-of-type) {
    font-size: 20px;
    font-weight: 500;
    color: #02182B;
    margin: 28px 0 12px 0;
}

/* ===== Bullet list — custom dot instead of default browser disc ===== */
.elementor-widget-woocommerce-product-content ul {
    list-style: none;
    margin: 0 0 20px 0;
    padding: 0;
}
.elementor-widget-woocommerce-product-content ul li {
    position: relative;
    padding-left: 22px;
    margin-bottom: 10px;
    line-height: 1.6;
    font-size: 15px;
    color: #3a3f47;
}
.elementor-widget-woocommerce-product-content ul li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 8px;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #02182B;
}/* End custom CSS */
/* Start custom CSS for woocommerce-product-additional-information, class: .elementor-element-828e099 *//* Hide default heading text inside the widget tagged with
   CSS Class "product-info-heading" (set in Elementor's
   Advanced > CSS Classes field — portable across sites) */
.product-info-heading h2 {
    font-size: 0 !important;
    margin: 0 !important;
}

/* Inject replacement heading text */
.product-info-heading h2::before {
    content: "Product Information";
    display: block;
    font-family: "Open Sans", sans-serif;
    font-size: 32px;
    font-weight: 700;
    color: #02182B;
    margin-bottom: 20px;
}

/* ===== Card container: white background, rounded corners, soft shadow ===== */
table.woocommerce-product-attributes {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  border: none;
  background: #fff;
  border-radius: 3px;
  overflow: hidden;
  box-shadow: 0 2px 10px rgba(0,0,0,0.06);
}

/* ===== Alternating row colors (zebra striping) ===== */
table.woocommerce-product-attributes tr:nth-child(odd) {
  background-color: #ffffff;
}
table.woocommerce-product-attributes tr:nth-child(even) {
  background-color: #e8eaf0;
}

/* ===== Cancel theme's default hover background =====
   Your theme adds its own hover color to table rows. This forces
   each row to keep its own stripe color even while hovered, so
   there's no visible hover effect at all — not a new effect, just
   neutralizing theirs. */
table.woocommerce-product-attributes tr:nth-child(odd):hover {
  background-color: #ffffff !important;
}
table.woocommerce-product-attributes tr:nth-child(even):hover {
  background-color: #e8eaf0 !important;
}

/* ===== Base cell styling: spacing, font size, line height ===== */
table.woocommerce-product-attributes th,
table.woocommerce-product-attributes td {
  border: none !important;
  padding: 20px 28px !important; /* row height comes from here */
  font-size: 15px;
  line-height: 1.5;
  vertical-align: middle;
}

/* ===== NEW: force consistent row height across all rows =====
   Some value cells contain extra wrapper tags (span/div/ul) that carry
   their own margin or line-height, making those rows taller than others.
   This strips spacing from every element inside th/td so the padding
   declared above is the ONLY thing controlling row height. */
table.woocommerce-product-attributes td *,
table.woocommerce-product-attributes th * {
  margin: 0 !important;
  padding: 0 !important;
  line-height: 1.5 !important;
}

/* ===== Left column: attribute label (e.g. "Weight", "Size") ===== */
table.woocommerce-product-attributes th.woocommerce-product-attributes-item__label {
  text-align: left !important;
  font-weight: 600;
  color: #1a1a1a;
  width: 40%;
}

/* ===== Right column: attribute value ===== */
table.woocommerce-product-attributes td.woocommerce-product-attributes-item__value,
table.woocommerce-product-attributes td.woocommerce-product-attributes-item__value p,
table.woocommerce-product-attributes td.woocommerce-product-attributes-item__value * {
  text-align: right !important;
  margin: 0;
  color: #333;
}/* End custom CSS */
/* Start custom CSS for post-comments, class: .elementor-element-c10df04 *//* ========================================
   REVIEWS SECTION DESIGN MARK 3
======================================== */
.woocommerce-Reviews-title {
    font-size: 0 !important;
}
.woocommerce-Reviews-title::before {
    content: "Reviews";
    display: block;
    font-family: "open sans", sans-serif;
    font-size: 32px;
    font-weight: 700;
    color: #02182B;
    margin-bottom: 20px;
}

/* ========================================
   PAST REVIEW CARDS
======================================== */
#comments .commentlist {
    list-style: none;
    margin: 0;
    padding: 0;
}

.comment_container {
    position: relative; /* clean positioning context — nothing from
                            the theme's old absolute/float rules can
                            escape this box anymore */
    display: flex;
    align-items: flex-start;
    gap: 16px;
    background: #fff;
    border: 1px solid #eceef1;
    border-radius: 3px; /* subtle corners, not 8px+ */
    padding: 24px 28px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
    margin-bottom: 16px;
}

/* FIX: avatar was drifting away from the card — theme was likely
   positioning it absolutely or floating it. This forces it back into
   normal flex flow. */
.comment_container .avatar {
    position: static !important;
    float: none !important;
    top: auto !important;
    left: auto !important;
    margin: 0 !important;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    border: 2px solid #f1f2f5;
    flex-shrink: 0;
}

/* FIX: text column becomes its own flex column with explicit order,
   so meta -> stars -> description always stack in that visual order
   regardless of what order the theme actually outputs them in. */
.comment-text {
    margin: 0 !important;
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.comment-text .meta {
    order: 1;
    margin: 0 0 4px 0;
    font-size: 14px;
}

.woocommerce-review__author {
    font-weight: 700;
    color: #02182B;
    font-size: 15px;
}

.woocommerce-review__verified {
    font-style: normal !important;
    background: #e6f4ea;
    color: #1e7a34;
    font-size: 12px;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 10px;
    margin: 0 6px;
    display: inline-block;
}

.woocommerce-review__published-date {
    color: #8a8f98;
    font-size: 13px;
}

/* FIX: stars were floating beside the name — force them onto their
   own line below the meta row */
.comment-text .star-rating {
    order: 2;
    float: none !important;
    clear: both;
    display: block !important;
    margin: 6px 0 12px 0;
    font-size: 16px;
}
.star-rating::before {
    color: #e2e4e8 !important;
}
.star-rating span::before {
    color: #f5a623 !important;
}

.comment-text .description {
    order: 3;
}
.comment-text .description p {
    margin: 0 0 6px 0;
    color: #3a3f47;
    font-size: 15px;
    line-height: 1.6;
}

.woocommerce-verification-required {
    background: #f4f5f7;
    border-radius: 3px;
    padding: 14px 18px;
    font-size: 14px;
    color: #4a4f57;
    margin-top: 8px;
}

@media (max-width: 480px) {
    .comment_container { flex-direction: column; padding: 18px; }
}

/* ========================================
   REVIEW FORM SPACING
======================================== */
#review_form_wrapper .comment-reply-title {
    display: block;
    margin-bottom: 10px !important;
}
.comment-form-rating {
    margin-top: 10px !important;
    margin-bottom: 10px !important;
}
.comment-form-rating label,
.comment-form-comment label {
    display: block;
    margin-bottom: 10px !important;
}

/* ========================================
   STAR RATING PICKER (the form's clickable stars)
======================================== */
.comment-form-rating select#rating {
    display: none !important;
}

/* FIX: display:flow-root contains the floated star links so this
   paragraph never collapses to zero height — that collapse is what
   let "Your review" render on top of the stars before. */
.comment-form-rating p.stars {
    display: flow-root !important;
    margin-top: 10px;
}

/* FIX: hide the raw "1/2/3/4/5" text with text-indent instead of
   font-size:0. font-size:0 was the bug — these links' width/height
   are set in em units by the theme, relative to their own font-size,
   so zeroing it collapsed every star to 0×0 and stacked all five
   icons on top of each other (the "crown" shape you saw). */
.comment-form-rating p.stars a {
    width: 24px;
    height: 24px;
    text-indent: -9999px;
    overflow: hidden;
    display: inline-block;
    text-decoration: none;
    margin-right: 5px;
    float: left;
}
.comment-form-rating p.stars a::before {
    text-indent: 0;
    font-size: 24px;
    color: #ccc;
}
.comment-form-rating p.stars a:hover::before,
.comment-form-rating p.stars.selected a::before,
.comment-form-rating p.stars:hover a::before {
    color: #F5B301;
}

/* ========================================
   SUBMIT BUTTON
======================================== */
#review_form #respond .form-submit input,
#review_form #respond .form-submit button,
.woocommerce #review_form #respond .form-submit input.submit {
    padding: 14px 30px !important;
    background: #02182B !important;
    color: #FFFFFF !important;
    border: none !important;
    border-radius: 5px !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    transition: all 0.3s ease !important;
}
#review_form #respond .form-submit input:hover,
#review_form #respond .form-submit button:hover,
.woocommerce #review_form #respond .form-submit input.submit:hover {
    background: #CF5C36 !important;
    color: #FFFFFF !important;
}/* End custom CSS */
/* Start custom CSS for woocommerce-product-content, class: .elementor-element-bc7527f *//* ===== Main heading — unchanged, your existing hack works fine ===== */
.elementor-widget-woocommerce-product-content h4:first-of-type {
    font-size: 0 !important;
}
.elementor-widget-woocommerce-product-content h4:first-of-type::before {
    content: "Product Description";
    display: block;
    font-size: 32px;
    font-family: "Open Sans", sans-serif;
    font-weight: 700;
    color: #02182B;
    margin-bottom: 20px;
}

/* ===== Body paragraphs — consistent spacing + readable line-height ===== */
.elementor-widget-woocommerce-product-content p {
    margin: 0 0 16px 0 !important;
    line-height: 1.7;
    font-size: 15px;
    color: #3a3f47;
}

/* ===== Sub-headings (Key Features, Why Choose This Product, etc.) =====
   Targets every h4 EXCEPT the first one, which is already handled above */
.elementor-widget-woocommerce-product-content h4:not(:first-of-type) {
    font-size: 20px;
    font-weight: 500;
    color: #02182B;
    margin: 28px 0 12px 0;
}

/* ===== Bullet list — custom dot instead of default browser disc ===== */
.elementor-widget-woocommerce-product-content ul {
    list-style: none;
    margin: 0 0 20px 0;
    padding: 0;
}
.elementor-widget-woocommerce-product-content ul li {
    position: relative;
    padding-left: 22px;
    margin-bottom: 10px;
    line-height: 1.6;
    font-size: 15px;
    color: #3a3f47;
}
.elementor-widget-woocommerce-product-content ul li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 8px;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #02182B;
}/* End custom CSS */
/* Start custom CSS for woocommerce-product-additional-information, class: .elementor-element-828e099 *//* Hide default heading text inside the widget tagged with
   CSS Class "product-info-heading" (set in Elementor's
   Advanced > CSS Classes field — portable across sites) */
.product-info-heading h2 {
    font-size: 0 !important;
    margin: 0 !important;
}

/* Inject replacement heading text */
.product-info-heading h2::before {
    content: "Product Information";
    display: block;
    font-family: "Open Sans", sans-serif;
    font-size: 32px;
    font-weight: 700;
    color: #02182B;
    margin-bottom: 20px;
}

/* ===== Card container: white background, rounded corners, soft shadow ===== */
table.woocommerce-product-attributes {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  border: none;
  background: #fff;
  border-radius: 3px;
  overflow: hidden;
  box-shadow: 0 2px 10px rgba(0,0,0,0.06);
}

/* ===== Alternating row colors (zebra striping) ===== */
table.woocommerce-product-attributes tr:nth-child(odd) {
  background-color: #ffffff;
}
table.woocommerce-product-attributes tr:nth-child(even) {
  background-color: #e8eaf0;
}

/* ===== Cancel theme's default hover background =====
   Your theme adds its own hover color to table rows. This forces
   each row to keep its own stripe color even while hovered, so
   there's no visible hover effect at all — not a new effect, just
   neutralizing theirs. */
table.woocommerce-product-attributes tr:nth-child(odd):hover {
  background-color: #ffffff !important;
}
table.woocommerce-product-attributes tr:nth-child(even):hover {
  background-color: #e8eaf0 !important;
}

/* ===== Base cell styling: spacing, font size, line height ===== */
table.woocommerce-product-attributes th,
table.woocommerce-product-attributes td {
  border: none !important;
  padding: 20px 28px !important; /* row height comes from here */
  font-size: 15px;
  line-height: 1.5;
  vertical-align: middle;
}

/* ===== NEW: force consistent row height across all rows =====
   Some value cells contain extra wrapper tags (span/div/ul) that carry
   their own margin or line-height, making those rows taller than others.
   This strips spacing from every element inside th/td so the padding
   declared above is the ONLY thing controlling row height. */
table.woocommerce-product-attributes td *,
table.woocommerce-product-attributes th * {
  margin: 0 !important;
  padding: 0 !important;
  line-height: 1.5 !important;
}

/* ===== Left column: attribute label (e.g. "Weight", "Size") ===== */
table.woocommerce-product-attributes th.woocommerce-product-attributes-item__label {
  text-align: left !important;
  font-weight: 600;
  color: #1a1a1a;
  width: 40%;
}

/* ===== Right column: attribute value ===== */
table.woocommerce-product-attributes td.woocommerce-product-attributes-item__value,
table.woocommerce-product-attributes td.woocommerce-product-attributes-item__value p,
table.woocommerce-product-attributes td.woocommerce-product-attributes-item__value * {
  text-align: right !important;
  margin: 0;
  color: #333;
}/* End custom CSS */
/* Start custom CSS for post-comments, class: .elementor-element-c10df04 *//* ========================================
   REVIEWS SECTION DESIGN MARK 3
======================================== */
.woocommerce-Reviews-title {
    font-size: 0 !important;
}
.woocommerce-Reviews-title::before {
    content: "Reviews";
    display: block;
    font-family: "open sans", sans-serif;
    font-size: 32px;
    font-weight: 700;
    color: #02182B;
    margin-bottom: 20px;
}

/* ========================================
   PAST REVIEW CARDS
======================================== */
#comments .commentlist {
    list-style: none;
    margin: 0;
    padding: 0;
}

.comment_container {
    position: relative; /* clean positioning context — nothing from
                            the theme's old absolute/float rules can
                            escape this box anymore */
    display: flex;
    align-items: flex-start;
    gap: 16px;
    background: #fff;
    border: 1px solid #eceef1;
    border-radius: 3px; /* subtle corners, not 8px+ */
    padding: 24px 28px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
    margin-bottom: 16px;
}

/* FIX: avatar was drifting away from the card — theme was likely
   positioning it absolutely or floating it. This forces it back into
   normal flex flow. */
.comment_container .avatar {
    position: static !important;
    float: none !important;
    top: auto !important;
    left: auto !important;
    margin: 0 !important;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    border: 2px solid #f1f2f5;
    flex-shrink: 0;
}

/* FIX: text column becomes its own flex column with explicit order,
   so meta -> stars -> description always stack in that visual order
   regardless of what order the theme actually outputs them in. */
.comment-text {
    margin: 0 !important;
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.comment-text .meta {
    order: 1;
    margin: 0 0 4px 0;
    font-size: 14px;
}

.woocommerce-review__author {
    font-weight: 700;
    color: #02182B;
    font-size: 15px;
}

.woocommerce-review__verified {
    font-style: normal !important;
    background: #e6f4ea;
    color: #1e7a34;
    font-size: 12px;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 10px;
    margin: 0 6px;
    display: inline-block;
}

.woocommerce-review__published-date {
    color: #8a8f98;
    font-size: 13px;
}

/* FIX: stars were floating beside the name — force them onto their
   own line below the meta row */
.comment-text .star-rating {
    order: 2;
    float: none !important;
    clear: both;
    display: block !important;
    margin: 6px 0 12px 0;
    font-size: 16px;
}
.star-rating::before {
    color: #e2e4e8 !important;
}
.star-rating span::before {
    color: #f5a623 !important;
}

.comment-text .description {
    order: 3;
}
.comment-text .description p {
    margin: 0 0 6px 0;
    color: #3a3f47;
    font-size: 15px;
    line-height: 1.6;
}

.woocommerce-verification-required {
    background: #f4f5f7;
    border-radius: 3px;
    padding: 14px 18px;
    font-size: 14px;
    color: #4a4f57;
    margin-top: 8px;
}

@media (max-width: 480px) {
    .comment_container { flex-direction: column; padding: 18px; }
}

/* ========================================
   REVIEW FORM SPACING
======================================== */
#review_form_wrapper .comment-reply-title {
    display: block;
    margin-bottom: 10px !important;
}
.comment-form-rating {
    margin-top: 10px !important;
    margin-bottom: 10px !important;
}
.comment-form-rating label,
.comment-form-comment label {
    display: block;
    margin-bottom: 10px !important;
}

/* ========================================
   STAR RATING PICKER (the form's clickable stars)
======================================== */
.comment-form-rating select#rating {
    display: none !important;
}

/* FIX: display:flow-root contains the floated star links so this
   paragraph never collapses to zero height — that collapse is what
   let "Your review" render on top of the stars before. */
.comment-form-rating p.stars {
    display: flow-root !important;
    margin-top: 10px;
}

/* FIX: hide the raw "1/2/3/4/5" text with text-indent instead of
   font-size:0. font-size:0 was the bug — these links' width/height
   are set in em units by the theme, relative to their own font-size,
   so zeroing it collapsed every star to 0×0 and stacked all five
   icons on top of each other (the "crown" shape you saw). */
.comment-form-rating p.stars a {
    width: 24px;
    height: 24px;
    text-indent: -9999px;
    overflow: hidden;
    display: inline-block;
    text-decoration: none;
    margin-right: 5px;
    float: left;
}
.comment-form-rating p.stars a::before {
    text-indent: 0;
    font-size: 24px;
    color: #ccc;
}
.comment-form-rating p.stars a:hover::before,
.comment-form-rating p.stars.selected a::before,
.comment-form-rating p.stars:hover a::before {
    color: #F5B301;
}

/* ========================================
   SUBMIT BUTTON
======================================== */
#review_form #respond .form-submit input,
#review_form #respond .form-submit button,
.woocommerce #review_form #respond .form-submit input.submit {
    padding: 14px 30px !important;
    background: #02182B !important;
    color: #FFFFFF !important;
    border: none !important;
    border-radius: 5px !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    transition: all 0.3s ease !important;
}
#review_form #respond .form-submit input:hover,
#review_form #respond .form-submit button:hover,
.woocommerce #review_form #respond .form-submit input.submit:hover {
    background: #CF5C36 !important;
    color: #FFFFFF !important;
}/* End custom CSS */
/* Start custom CSS for woocommerce-product-content, class: .elementor-element-bc7527f *//* ===== Main heading — unchanged, your existing hack works fine ===== */
.elementor-widget-woocommerce-product-content h4:first-of-type {
    font-size: 0 !important;
}
.elementor-widget-woocommerce-product-content h4:first-of-type::before {
    content: "Product Description";
    display: block;
    font-size: 32px;
    font-family: "Open Sans", sans-serif;
    font-weight: 700;
    color: #02182B;
    margin-bottom: 20px;
}

/* ===== Body paragraphs — consistent spacing + readable line-height ===== */
.elementor-widget-woocommerce-product-content p {
    margin: 0 0 16px 0 !important;
    line-height: 1.7;
    font-size: 15px;
    color: #3a3f47;
}

/* ===== Sub-headings (Key Features, Why Choose This Product, etc.) =====
   Targets every h4 EXCEPT the first one, which is already handled above */
.elementor-widget-woocommerce-product-content h4:not(:first-of-type) {
    font-size: 20px;
    font-weight: 500;
    color: #02182B;
    margin: 28px 0 12px 0;
}

/* ===== Bullet list — custom dot instead of default browser disc ===== */
.elementor-widget-woocommerce-product-content ul {
    list-style: none;
    margin: 0 0 20px 0;
    padding: 0;
}
.elementor-widget-woocommerce-product-content ul li {
    position: relative;
    padding-left: 22px;
    margin-bottom: 10px;
    line-height: 1.6;
    font-size: 15px;
    color: #3a3f47;
}
.elementor-widget-woocommerce-product-content ul li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 8px;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #02182B;
}/* End custom CSS */
/* Start custom CSS for woocommerce-product-additional-information, class: .elementor-element-828e099 *//* Hide default heading text inside the widget tagged with
   CSS Class "product-info-heading" (set in Elementor's
   Advanced > CSS Classes field — portable across sites) */
.product-info-heading h2 {
    font-size: 0 !important;
    margin: 0 !important;
}

/* Inject replacement heading text */
.product-info-heading h2::before {
    content: "Product Information";
    display: block;
    font-family: "Open Sans", sans-serif;
    font-size: 32px;
    font-weight: 700;
    color: #02182B;
    margin-bottom: 20px;
}

/* ===== Card container: white background, rounded corners, soft shadow ===== */
table.woocommerce-product-attributes {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  border: none;
  background: #fff;
  border-radius: 3px;
  overflow: hidden;
  box-shadow: 0 2px 10px rgba(0,0,0,0.06);
}

/* ===== Alternating row colors (zebra striping) ===== */
table.woocommerce-product-attributes tr:nth-child(odd) {
  background-color: #ffffff;
}
table.woocommerce-product-attributes tr:nth-child(even) {
  background-color: #e8eaf0;
}

/* ===== Cancel theme's default hover background =====
   Your theme adds its own hover color to table rows. This forces
   each row to keep its own stripe color even while hovered, so
   there's no visible hover effect at all — not a new effect, just
   neutralizing theirs. */
table.woocommerce-product-attributes tr:nth-child(odd):hover {
  background-color: #ffffff !important;
}
table.woocommerce-product-attributes tr:nth-child(even):hover {
  background-color: #e8eaf0 !important;
}

/* ===== Base cell styling: spacing, font size, line height ===== */
table.woocommerce-product-attributes th,
table.woocommerce-product-attributes td {
  border: none !important;
  padding: 20px 28px !important; /* row height comes from here */
  font-size: 15px;
  line-height: 1.5;
  vertical-align: middle;
}

/* ===== NEW: force consistent row height across all rows =====
   Some value cells contain extra wrapper tags (span/div/ul) that carry
   their own margin or line-height, making those rows taller than others.
   This strips spacing from every element inside th/td so the padding
   declared above is the ONLY thing controlling row height. */
table.woocommerce-product-attributes td *,
table.woocommerce-product-attributes th * {
  margin: 0 !important;
  padding: 0 !important;
  line-height: 1.5 !important;
}

/* ===== Left column: attribute label (e.g. "Weight", "Size") ===== */
table.woocommerce-product-attributes th.woocommerce-product-attributes-item__label {
  text-align: left !important;
  font-weight: 600;
  color: #1a1a1a;
  width: 40%;
}

/* ===== Right column: attribute value ===== */
table.woocommerce-product-attributes td.woocommerce-product-attributes-item__value,
table.woocommerce-product-attributes td.woocommerce-product-attributes-item__value p,
table.woocommerce-product-attributes td.woocommerce-product-attributes-item__value * {
  text-align: right !important;
  margin: 0;
  color: #333;
}/* End custom CSS */
/* Start custom CSS for post-comments, class: .elementor-element-c10df04 *//* ========================================
   REVIEWS SECTION DESIGN MARK 3
======================================== */
.woocommerce-Reviews-title {
    font-size: 0 !important;
}
.woocommerce-Reviews-title::before {
    content: "Reviews";
    display: block;
    font-family: "open sans", sans-serif;
    font-size: 32px;
    font-weight: 700;
    color: #02182B;
    margin-bottom: 20px;
}

/* ========================================
   PAST REVIEW CARDS
======================================== */
#comments .commentlist {
    list-style: none;
    margin: 0;
    padding: 0;
}

.comment_container {
    position: relative; /* clean positioning context — nothing from
                            the theme's old absolute/float rules can
                            escape this box anymore */
    display: flex;
    align-items: flex-start;
    gap: 16px;
    background: #fff;
    border: 1px solid #eceef1;
    border-radius: 3px; /* subtle corners, not 8px+ */
    padding: 24px 28px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
    margin-bottom: 16px;
}

/* FIX: avatar was drifting away from the card — theme was likely
   positioning it absolutely or floating it. This forces it back into
   normal flex flow. */
.comment_container .avatar {
    position: static !important;
    float: none !important;
    top: auto !important;
    left: auto !important;
    margin: 0 !important;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    border: 2px solid #f1f2f5;
    flex-shrink: 0;
}

/* FIX: text column becomes its own flex column with explicit order,
   so meta -> stars -> description always stack in that visual order
   regardless of what order the theme actually outputs them in. */
.comment-text {
    margin: 0 !important;
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.comment-text .meta {
    order: 1;
    margin: 0 0 4px 0;
    font-size: 14px;
}

.woocommerce-review__author {
    font-weight: 700;
    color: #02182B;
    font-size: 15px;
}

.woocommerce-review__verified {
    font-style: normal !important;
    background: #e6f4ea;
    color: #1e7a34;
    font-size: 12px;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 10px;
    margin: 0 6px;
    display: inline-block;
}

.woocommerce-review__published-date {
    color: #8a8f98;
    font-size: 13px;
}

/* FIX: stars were floating beside the name — force them onto their
   own line below the meta row */
.comment-text .star-rating {
    order: 2;
    float: none !important;
    clear: both;
    display: block !important;
    margin: 6px 0 12px 0;
    font-size: 16px;
}
.star-rating::before {
    color: #e2e4e8 !important;
}
.star-rating span::before {
    color: #f5a623 !important;
}

.comment-text .description {
    order: 3;
}
.comment-text .description p {
    margin: 0 0 6px 0;
    color: #3a3f47;
    font-size: 15px;
    line-height: 1.6;
}

.woocommerce-verification-required {
    background: #f4f5f7;
    border-radius: 3px;
    padding: 14px 18px;
    font-size: 14px;
    color: #4a4f57;
    margin-top: 8px;
}

@media (max-width: 480px) {
    .comment_container { flex-direction: column; padding: 18px; }
}

/* ========================================
   REVIEW FORM SPACING
======================================== */
#review_form_wrapper .comment-reply-title {
    display: block;
    margin-bottom: 10px !important;
}
.comment-form-rating {
    margin-top: 10px !important;
    margin-bottom: 10px !important;
}
.comment-form-rating label,
.comment-form-comment label {
    display: block;
    margin-bottom: 10px !important;
}

/* ========================================
   STAR RATING PICKER (the form's clickable stars)
======================================== */
.comment-form-rating select#rating {
    display: none !important;
}

/* FIX: display:flow-root contains the floated star links so this
   paragraph never collapses to zero height — that collapse is what
   let "Your review" render on top of the stars before. */
.comment-form-rating p.stars {
    display: flow-root !important;
    margin-top: 10px;
}

/* FIX: hide the raw "1/2/3/4/5" text with text-indent instead of
   font-size:0. font-size:0 was the bug — these links' width/height
   are set in em units by the theme, relative to their own font-size,
   so zeroing it collapsed every star to 0×0 and stacked all five
   icons on top of each other (the "crown" shape you saw). */
.comment-form-rating p.stars a {
    width: 24px;
    height: 24px;
    text-indent: -9999px;
    overflow: hidden;
    display: inline-block;
    text-decoration: none;
    margin-right: 5px;
    float: left;
}
.comment-form-rating p.stars a::before {
    text-indent: 0;
    font-size: 24px;
    color: #ccc;
}
.comment-form-rating p.stars a:hover::before,
.comment-form-rating p.stars.selected a::before,
.comment-form-rating p.stars:hover a::before {
    color: #F5B301;
}

/* ========================================
   SUBMIT BUTTON
======================================== */
#review_form #respond .form-submit input,
#review_form #respond .form-submit button,
.woocommerce #review_form #respond .form-submit input.submit {
    padding: 14px 30px !important;
    background: #02182B !important;
    color: #FFFFFF !important;
    border: none !important;
    border-radius: 5px !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    transition: all 0.3s ease !important;
}
#review_form #respond .form-submit input:hover,
#review_form #respond .form-submit button:hover,
.woocommerce #review_form #respond .form-submit input.submit:hover {
    background: #CF5C36 !important;
    color: #FFFFFF !important;
}/* End custom CSS */
/* Start custom CSS for woocommerce-product-content, class: .elementor-element-bc7527f *//* ===== Main heading — unchanged, your existing hack works fine ===== */
.elementor-widget-woocommerce-product-content h4:first-of-type {
    font-size: 0 !important;
}
.elementor-widget-woocommerce-product-content h4:first-of-type::before {
    content: "Product Description";
    display: block;
    font-size: 32px;
    font-family: "Open Sans", sans-serif;
    font-weight: 700;
    color: #02182B;
    margin-bottom: 20px;
}

/* ===== Body paragraphs — consistent spacing + readable line-height ===== */
.elementor-widget-woocommerce-product-content p {
    margin: 0 0 16px 0 !important;
    line-height: 1.7;
    font-size: 15px;
    color: #3a3f47;
}

/* ===== Sub-headings (Key Features, Why Choose This Product, etc.) =====
   Targets every h4 EXCEPT the first one, which is already handled above */
.elementor-widget-woocommerce-product-content h4:not(:first-of-type) {
    font-size: 20px;
    font-weight: 500;
    color: #02182B;
    margin: 28px 0 12px 0;
}

/* ===== Bullet list — custom dot instead of default browser disc ===== */
.elementor-widget-woocommerce-product-content ul {
    list-style: none;
    margin: 0 0 20px 0;
    padding: 0;
}
.elementor-widget-woocommerce-product-content ul li {
    position: relative;
    padding-left: 22px;
    margin-bottom: 10px;
    line-height: 1.6;
    font-size: 15px;
    color: #3a3f47;
}
.elementor-widget-woocommerce-product-content ul li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 8px;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #02182B;
}/* End custom CSS */
/* Start custom CSS for woocommerce-product-additional-information, class: .elementor-element-828e099 *//* Hide default heading text inside the widget tagged with
   CSS Class "product-info-heading" (set in Elementor's
   Advanced > CSS Classes field — portable across sites) */
.product-info-heading h2 {
    font-size: 0 !important;
    margin: 0 !important;
}

/* Inject replacement heading text */
.product-info-heading h2::before {
    content: "Product Information";
    display: block;
    font-family: "Open Sans", sans-serif;
    font-size: 32px;
    font-weight: 700;
    color: #02182B;
    margin-bottom: 20px;
}

/* ===== Card container: white background, rounded corners, soft shadow ===== */
table.woocommerce-product-attributes {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  border: none;
  background: #fff;
  border-radius: 3px;
  overflow: hidden;
  box-shadow: 0 2px 10px rgba(0,0,0,0.06);
}

/* ===== Alternating row colors (zebra striping) ===== */
table.woocommerce-product-attributes tr:nth-child(odd) {
  background-color: #ffffff;
}
table.woocommerce-product-attributes tr:nth-child(even) {
  background-color: #e8eaf0;
}

/* ===== Cancel theme's default hover background =====
   Your theme adds its own hover color to table rows. This forces
   each row to keep its own stripe color even while hovered, so
   there's no visible hover effect at all — not a new effect, just
   neutralizing theirs. */
table.woocommerce-product-attributes tr:nth-child(odd):hover {
  background-color: #ffffff !important;
}
table.woocommerce-product-attributes tr:nth-child(even):hover {
  background-color: #e8eaf0 !important;
}

/* ===== Base cell styling: spacing, font size, line height ===== */
table.woocommerce-product-attributes th,
table.woocommerce-product-attributes td {
  border: none !important;
  padding: 20px 28px !important; /* row height comes from here */
  font-size: 15px;
  line-height: 1.5;
  vertical-align: middle;
}

/* ===== NEW: force consistent row height across all rows =====
   Some value cells contain extra wrapper tags (span/div/ul) that carry
   their own margin or line-height, making those rows taller than others.
   This strips spacing from every element inside th/td so the padding
   declared above is the ONLY thing controlling row height. */
table.woocommerce-product-attributes td *,
table.woocommerce-product-attributes th * {
  margin: 0 !important;
  padding: 0 !important;
  line-height: 1.5 !important;
}

/* ===== Left column: attribute label (e.g. "Weight", "Size") ===== */
table.woocommerce-product-attributes th.woocommerce-product-attributes-item__label {
  text-align: left !important;
  font-weight: 600;
  color: #1a1a1a;
  width: 40%;
}

/* ===== Right column: attribute value ===== */
table.woocommerce-product-attributes td.woocommerce-product-attributes-item__value,
table.woocommerce-product-attributes td.woocommerce-product-attributes-item__value p,
table.woocommerce-product-attributes td.woocommerce-product-attributes-item__value * {
  text-align: right !important;
  margin: 0;
  color: #333;
}/* End custom CSS */
/* Start custom CSS for post-comments, class: .elementor-element-c10df04 *//* ========================================
   REVIEWS SECTION DESIGN MARK 3
======================================== */
.woocommerce-Reviews-title {
    font-size: 0 !important;
}
.woocommerce-Reviews-title::before {
    content: "Reviews";
    display: block;
    font-family: "open sans", sans-serif;
    font-size: 32px;
    font-weight: 700;
    color: #02182B;
    margin-bottom: 20px;
}

/* ========================================
   PAST REVIEW CARDS
======================================== */
#comments .commentlist {
    list-style: none;
    margin: 0;
    padding: 0;
}

.comment_container {
    position: relative; /* clean positioning context — nothing from
                            the theme's old absolute/float rules can
                            escape this box anymore */
    display: flex;
    align-items: flex-start;
    gap: 16px;
    background: #fff;
    border: 1px solid #eceef1;
    border-radius: 3px; /* subtle corners, not 8px+ */
    padding: 24px 28px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
    margin-bottom: 16px;
}

/* FIX: avatar was drifting away from the card — theme was likely
   positioning it absolutely or floating it. This forces it back into
   normal flex flow. */
.comment_container .avatar {
    position: static !important;
    float: none !important;
    top: auto !important;
    left: auto !important;
    margin: 0 !important;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    border: 2px solid #f1f2f5;
    flex-shrink: 0;
}

/* FIX: text column becomes its own flex column with explicit order,
   so meta -> stars -> description always stack in that visual order
   regardless of what order the theme actually outputs them in. */
.comment-text {
    margin: 0 !important;
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.comment-text .meta {
    order: 1;
    margin: 0 0 4px 0;
    font-size: 14px;
}

.woocommerce-review__author {
    font-weight: 700;
    color: #02182B;
    font-size: 15px;
}

.woocommerce-review__verified {
    font-style: normal !important;
    background: #e6f4ea;
    color: #1e7a34;
    font-size: 12px;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 10px;
    margin: 0 6px;
    display: inline-block;
}

.woocommerce-review__published-date {
    color: #8a8f98;
    font-size: 13px;
}

/* FIX: stars were floating beside the name — force them onto their
   own line below the meta row */
.comment-text .star-rating {
    order: 2;
    float: none !important;
    clear: both;
    display: block !important;
    margin: 6px 0 12px 0;
    font-size: 16px;
}
.star-rating::before {
    color: #e2e4e8 !important;
}
.star-rating span::before {
    color: #f5a623 !important;
}

.comment-text .description {
    order: 3;
}
.comment-text .description p {
    margin: 0 0 6px 0;
    color: #3a3f47;
    font-size: 15px;
    line-height: 1.6;
}

.woocommerce-verification-required {
    background: #f4f5f7;
    border-radius: 3px;
    padding: 14px 18px;
    font-size: 14px;
    color: #4a4f57;
    margin-top: 8px;
}

@media (max-width: 480px) {
    .comment_container { flex-direction: column; padding: 18px; }
}

/* ========================================
   REVIEW FORM SPACING
======================================== */
#review_form_wrapper .comment-reply-title {
    display: block;
    margin-bottom: 10px !important;
}
.comment-form-rating {
    margin-top: 10px !important;
    margin-bottom: 10px !important;
}
.comment-form-rating label,
.comment-form-comment label {
    display: block;
    margin-bottom: 10px !important;
}

/* ========================================
   STAR RATING PICKER (the form's clickable stars)
======================================== */
.comment-form-rating select#rating {
    display: none !important;
}

/* FIX: display:flow-root contains the floated star links so this
   paragraph never collapses to zero height — that collapse is what
   let "Your review" render on top of the stars before. */
.comment-form-rating p.stars {
    display: flow-root !important;
    margin-top: 10px;
}

/* FIX: hide the raw "1/2/3/4/5" text with text-indent instead of
   font-size:0. font-size:0 was the bug — these links' width/height
   are set in em units by the theme, relative to their own font-size,
   so zeroing it collapsed every star to 0×0 and stacked all five
   icons on top of each other (the "crown" shape you saw). */
.comment-form-rating p.stars a {
    width: 24px;
    height: 24px;
    text-indent: -9999px;
    overflow: hidden;
    display: inline-block;
    text-decoration: none;
    margin-right: 5px;
    float: left;
}
.comment-form-rating p.stars a::before {
    text-indent: 0;
    font-size: 24px;
    color: #ccc;
}
.comment-form-rating p.stars a:hover::before,
.comment-form-rating p.stars.selected a::before,
.comment-form-rating p.stars:hover a::before {
    color: #F5B301;
}

/* ========================================
   SUBMIT BUTTON
======================================== */
#review_form #respond .form-submit input,
#review_form #respond .form-submit button,
.woocommerce #review_form #respond .form-submit input.submit {
    padding: 14px 30px !important;
    background: #02182B !important;
    color: #FFFFFF !important;
    border: none !important;
    border-radius: 5px !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    transition: all 0.3s ease !important;
}
#review_form #respond .form-submit input:hover,
#review_form #respond .form-submit button:hover,
.woocommerce #review_form #respond .form-submit input.submit:hover {
    background: #CF5C36 !important;
    color: #FFFFFF !important;
}/* End custom CSS */