/* =========================================================
   UPD — Product Detail
   Font: Rethink Sans | Colors: blue #003b6b, green #0aba74
   ========================================================= */

:root {
   --bg: #f1f5f8;
   --card: #ffffff;
   --blue: #003b6b;
   --green: #0aba74;
   --border: #e2e8f0;
   --border-2: #ddd;
   --text: #444444;
   --text-dark: #252525;
   --text-muted: #6e6e6e;
   --navy: #1b2a4a;

   --text-body: #444444;
   --tag-bg: #f1f5f8;
  --dark-navy: #0b1a30;
  --finder-bg: #041d4c;
  --text-muted: #666666;
  --text-light: #888888;
  --border-light: #dddddd;
  --tag-cyan-bg: #e1f5fe;
  --card-border: rgba(0, 59, 107, 0.1);
  --font-primary: 'Rethink Sans', 'Segoe UI', Arial, sans-serif;
  --hero-shape-color: #f1f5f8;
}



* {
   margin: 0 ;
   padding: 0;
   box-sizing: border-box;
}

html {
   -webkit-text-size-adjust: 100%;
}
p {
    margin: 0;
    padding: 0px;
}
body{ font-family: 'Rethink Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;background: var(--bg);color: var(--text);font-size: 16px;line-height: normal;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;}
img{ display: block;max-width: 100%;}
button{ font-family: inherit;cursor: pointer;border: none;background: 0 0;}

.details__title{ font-size: 18px;font-weight: 700;color: var(--blue);    margin-bottom: 0;}
.divider{ border: none;border-top: 1px solid var(--border);width: 100%;}
.hero{ background: var(--card);border-radius: 30px;padding: 30px;display: flex;gap: 20px;align-items: flex-start;}
.hero__gallery{ width: 586px;flex-shrink: 0;}
.gallery{ display: flex;flex-direction: column;gap: 25px;}
.gallery__stage{ background: var(--card);border: 1px solid var(--border);border-radius: 20px;height: 460px;padding: 30px;display: flex;align-items: center;justify-content: center;overflow: hidden;}
.gallery-main{ width: 100%;height: 100%;}
.gallery-main .swiper-slide{ display: flex;align-items: center;justify-content: center;}
.gallery-main .swiper-slide img{ max-width: 100%;max-height: 400px;object-fit: contain;}
.gallery__thumbs-row{ display: flex;align-items: center;justify-content: space-between;gap: 10px;}
.gallery__nav{ width: 50px;height: 50px;flex-shrink: 0;display: flex;align-items: center;justify-content: center;border-radius: 50%;transition: transform .2s ease,box-shadow .2s ease,filter .2s ease;}
.gallery__nav img{ width: 50px;height: 50px;object-fit: contain;}
.gallery__nav:hover{ transform: scale(1.08);filter: brightness(.94);}
.gallery__nav:active{ transform: scale(.96);}
.gallery-thumbs{ flex: 1;min-width: 0;padding: 0 10px;}
.gallery-thumbs .swiper-slide{ width: 75px;height: 75px;cursor: pointer;opacity: .65;transition: opacity .2s ease;}
.gallery-thumbs .swiper-slide-thumb-active{ opacity: 1;}
.gallery-thumbs .swiper-slide img{ width: 75px;height: 75px;object-fit: cover;border-radius: 10px;}
.hero__features{ flex: 1;min-width: 0;padding-top: 0px;}
.features{ display: flex;flex-direction: column;gap: 6px;}
.features__titles{ display: flex;flex-direction: column;gap: 2px;   ;}
.features__title{ font-size: 30px;font-weight: 700;color: var(--blue);line-height: normal;word-break: break-word; margin-bottom: 0}
.features__subtitle{ font-size: 22px;font-weight: 700;color: var(--blue);line-height: normal;}
.rating-row{ display: flex;align-items: center;gap: 8px;    margin-bottom: 7px;}
.stars{ display: inline-flex;align-items: center;gap: 2px;}
.stars img{ width: 16px;height: 16px;}
.rating-row__text{ font-size: 11px;font-weight: 500;color: #a7a7a7;}
.features__desc{ font-size: 16px;font-weight: 400;line-height: 1.6;color: var(--text);    margin-top: 30px;}
.features__desc ul{    margin-left: 20px;}
.highlights{ display: flex;gap: 3px;    padding-top: 2px;}
.highlight{ flex: 1;min-width: 0;display: flex;flex-direction: column;align-items: center;gap: 8px;}
.highlight__icon{ height: 24px;display: flex;align-items: center;justify-content: center;}
.highlight__glyph{ width: 24px;height: 24px;}
.us-flag{ display: flex;width: 28px;height: 18px;background: #fff;border: 1px solid #e0e0e0;overflow: hidden;}
.us-flag img{ width: 28px;height: 18px;}
.highlight__label{justify-content: center;gap: 3px; display: flex;flex-direction: row;align-items: center;text-align: center;font-size: 11px;font-weight: 500;color: var(--text);line-height: 1.3;width: 100%;}
.purchase{ flex: 1;min-width: 0;background: var(--card);border: 1px solid var(--border);border-radius: 20px;padding: 20px;display: flex;flex-direction: column;gap: 10px;    margin-top: 15px;}
.purchase__price{ display: flex;flex-direction: column;gap: 2px;color: var(--blue);padding-bottom: 7px;}
.purchase__starting{ font-size: 12px;font-weight: 700;letter-spacing: 1.5px;}
.price{ display: inline-flex;align-items: baseline;}
.price--big .price__dollars{ font-size: 40px;font-weight: 700;}
.price--big .price__cents{ font-size: 22px;font-weight: 500;}
.purchase__fab{ display: flex;gap: 10px;align-items: flex-start;padding-bottom: 15px;}
.purchase__fab-icon{ width: 30px;height: 30px;flex-shrink: 0;}
.purchase__fab-text{ display: flex;flex-direction: column;gap: 3px;}
.purchase__fab-title{ font-size: 16px;font-weight: 700;color: var(--text-dark);    margin-bottom: 0;}
.purchase__fab-days,.purchase__fab-exp{ font-size: 14px;font-weight: 500;color: var(--text-muted);margin-bottom: 0}
.opt-group{ display: flex;flex-direction: column;gap: 5px;    width: 100%;}
.thick-color{ display: flex;gap: 20px;}
.opt-group__label{ font-size: 16px;font-weight: 700;color: var(--blue);    margin-bottom: 0;}
.opt-row{ display: flex;gap: 15px;}
.opt{ flex: 1;min-width: 0;display: flex;align-items: center;gap: 10px;padding: 10px;border: 1px solid var(--border-2);border-radius: 8px;position: relative;cursor: pointer;}
.opt--active{ border-color: var(--blue);}
.opt__radio{ position: relative;width: 18px;height: 18px;flex-shrink: 0;display: flex;}
.opt__radio img{ width: 18px;height: 18px;}
.opt__dot{ position: absolute;left: 4px;top: 4px;width: 10px;height: 10px;border-radius: 50%;background: var(--blue);}
.opt__text{ font-size: 16px;font-weight: 600;color: var(--text); /* white-space: nowrap; */}
.opt--active .opt__text{ color: var(--blue);}
.swatches{ display: flex;flex-wrap: wrap;gap: 8px;justify-content: flex-start;padding-top: 10px;}
.swatches img{ width: 22px;height: 22px;border-radius: 50%;}
.total-row{ display: flex;align-items: end;justify-content: end;padding-top: 5px;gap: 30px;}
.total-row__label{ font-size: 20px;font-weight: 600;color: #000;}
.price--total{ color: var(--green);}
.price--total .price__dollars{ font-size: 20px;font-weight: 700;}
.price--total .price__cents{ font-size: 15px;font-weight: 500;}
.btn-order{   display: flex;  margin: 0px 0 0 auto;background: var(--blue);color: #fff;border-radius: 50px;padding: 11px 37px !important;font-size: 16px;font-weight: 700; width: fit-content;;text-align: center;}
.secure{ display: flex;align-items: center;justify-content: center;gap: 8px;}
.secure img{ width: 14px;height: 14px;}
.secure span{ font-size: 13px;font-weight: 500;color: #929292;}
.stats-bar{ background: var(--card);border-radius: 20px;padding: 40px 30px;display: flex;margin-top: 34px;    justify-content: space-between;}
.stat{min-width: 0;display: flex;align-items: center;gap: 16px;}
.stat__icon{ width: 34px;height: 34px;flex-shrink: 0;}
.stat__text{ font-size: 16px;font-weight: 600;color: var(--text);line-height: normal;}
.card-inputs{ background: var(--card);border-radius: 20px;padding: 30px;display: flex;flex-direction: column;gap: 26px;margin-top: 34px;}
.card-inputs__head{ display: flex;flex-direction: column;gap: 8px;}
.card-inputs__title{ font-size: 26px;font-weight: 700;color: var(--blue);line-height: normal;    margin-bottom: 0;}
.card-inputs__note-green{ font-size: 16px;font-weight: 600;color: var(--green);}
.card-inputs__note-grey{ font-size: 14px;font-weight: 500;color: rgba(0,0,0,.65);}
.notes{ display: flex;flex-direction: column;gap: 14px;}
.notes__heading{ font-size: 18px;font-weight: 700;color: var(--blue); margin-bottom: 0;}
.notes__disclaimer{ font-size: 16px;font-weight: 400;color: rgba(37,37,37,.68);line-height: normal;}
.notes__field{ display: flex;flex-direction: column;gap: 2px;}
.notes__textarea{ width: 100%;height: 120px;border: 1px solid #d1d1d1;border-radius: 8px;padding: 12px;font-family: inherit;font-size: 14px;color: var(--text);resize: vertical;}
.notes__textarea::placeholder{ color: var(--text-muted);}
.notes__remaining{ font-size: 12px;font-weight: 400;color: rgba(0,0,0,.35);}
.details{ background: var(--card);border-radius: 20px;padding: 40px 30px;display: flex;flex-direction: column;gap: 30px;margin-top: 34px;}
.details__top{ display: flex;gap: 30px;align-items: flex-start;}
.details__col{ flex: 1;min-width: 0;display: flex;flex-direction: column;gap: 20px;}
.fitment{ display: flex;flex-direction: column;gap: 20px;}
.fitment__item{ display: flex;align-items: flex-start;gap: 10px;}
.fitment__item img{ width: 16px;height: 16px;}
.fitment__item span{ font-size: 15px;font-weight: 600;color: var(--text);}
.warning-box{ background: #fdedad;border-left: 5px solid #f59e0b;border-radius: 12px;padding: 20px;display: flex;gap: 12px;align-items: flex-start;}
.warning-box__icon{ width: 20px;height: 20px;flex-shrink: 0;}
.warning-box__text{ font-size: 14px;font-weight: 400;color: #92400e;line-height: normal;}
.warning-box__text strong{ font-weight: 700;}
.schematic{ display: flex;flex-direction: column;gap: 15px;}
.schematic__frame{ background: var(--bg);border-radius: 12px;height: 312px;padding: 15px 20px;display: flex;flex-direction: column;gap: 20px;align-items: center;justify-content: center;}
.schematic__img{ width: 100%;height: 220px;display: flex;align-items: center;justify-content: center;}
.schematic__img img{ max-width: 100%;max-height: 234px;object-fit: contain;}
.btn-download{text-decoration: none;background: #003b6b;color: #fff;border-radius: 30px;padding: 10px 15px;display: flex;align-items: center;justify-content: center;gap: 10px;width: 100%;}
.btn-download img{ width: 18px;height: 18px;}
.btn-download span{ font-size: 15px;font-weight: 700;}
.specs{ border: 1px solid var(--border-2);border-radius: 12px;overflow: hidden;}
.specs__row{ display: flex;align-items: flex-start;padding: 7px 16px;border-bottom: 1px solid var(--border-2);font-size: 14px;color: var(--text);line-height: normal;}
.specs__row:nth-child(even){ background: var(--bg);}
.specs__row:last-child{ border-bottom: none;}
.specs__key{ width: 200px;flex-shrink: 0;font-weight: 600;}
.specs__val{ flex: 1;min-width: 0;font-weight: 400;}
.marine-trade{ position: relative;border: 1px solid var(--border-2);border-radius: 12px;height: 222px;overflow: hidden;display: flex;align-items: center;justify-content: center;padding: 0 10px;}
.marine-trade__bg{ width: 408px;max-width: 100%;height: 194px;object-fit: cover;border-radius: 20px;}
.marine-trade__overlay{ position: absolute;left: 50%;transform: translateX(-50%);bottom: 20px;width: 317px;max-width: calc(100% - 40px);background: #081b3c;border: 1px solid #325878;border-radius: 20px;padding: 6px 5px;display: flex;flex-direction: column;align-items: center;gap: 4px;}
.marine-trade__title{ font-size: 18px;font-weight: 700;color: #e42128;text-align: center;}
.marine-trade__rule{ width: 193px;max-width: 100%;height: 1px;background: #f2994a;}
.marine-trade__sub{ display: flex;align-items: center;gap: 21px;}
.marine-trade__sub span{ font-size: 14px;font-weight: 700;color: #fff;text-align: center;}
.marine-trade__sub img{ width: 18px;height: 18px;border-radius: 50%;object-fit: cover;}
.components{ display: flex;flex-direction: column;gap: 20px;}
.components__item{ display: flex;align-items: center;gap: 10px;}
.components__item img{ width: 20px;height: 20px;flex-shrink: 0;}
.components__item span{ font-size: 16px;font-weight: 400;color: var(--text);}
.hardware{ border: 1px solid var(--border-2);border-radius: 12px;height: 257px;padding: 15px 10px;display: flex;align-items: center;justify-content: center;}
.hardware img{ max-width: 100%;max-height: 227px;object-fit: contain;border-radius: 8px;}
.details__bottom{ display: flex;flex-direction: column;gap: 20px;}
.color-options{ display: flex;flex-direction: column;gap: 15px;}
.color-options__head{ display: flex;flex-direction: column;gap: 5px;}
.color-options__sub{ font-size: 16px;font-weight: 500;color: var(--text-dark);}
.color-options__strip img{ width: 100%;height: auto;object-fit: cover;border-radius: 8px;}
.reviews{ display: flex;gap: 17px;align-items: stretch;flex-direction: column;}
.reviews__summary{ width: 237px;flex-shrink: 0;display: flex;flex-direction: column;gap: 16px;align-items: flex-start;}
.reviews__title{ letter-spacing: 1px;}
.reviews__score{ display: flex;flex-direction: column;gap: 4px;}
.reviews__score-big{ font-size: 16px;font-weight: 700;color: var(--navy);}
.reviews__score-sub{ font-size: 14px;font-weight: 400;color: var(--text);}
.btn-review{ background: var(--navy);border: 1px solid var(--navy);color: #fff;border-radius: 30px;padding: 10px 25px;font-size: 12px;font-weight: 600;letter-spacing: .5px;text-transform: uppercase;}
.reviews__cards{ flex: 1;min-width: 0;display: flex;gap: 30px;align-items: stretch;}
.review-card{  flex-direction: column;   flex: 0 0 calc((100% - 90px) / 4);
    min-width: 0;flex: 1;min-width: 0;background: var(--card);border: 1px solid var(--border);border-radius: 16px;padding: 24px;display: flex;gap: 10px;align-items: flex-start;filter: drop-shadow(0 4px 6px rgba(0, 0, 0, .04));}
.review-card__content{ flex: 1;min-width: 0;display: flex;flex-direction: column;gap: 12px;}
.review-card__text{ display: flex;flex-direction: column;gap: 0px;}
.review-card__ttl{ font-size: 16px;font-weight: 700;color: var(--blue);line-height: 1.3;    margin-bottom: 0;}
.review-card__body{ font-size: 13px;font-weight: 400;color: var(--text);line-height: 1.5;}
.review-card__headers{ width: 100%;   display: flex;
    gap: 20px;}
.review-card__name{ font-size: 14px;font-weight: 700;color: var(--blue);}
.review-card__img{ width: 70px;height: auto;flex-shrink: 0;border-radius: 10px;overflow: hidden;}
.review-card__img img{ width: 110px;height: auto;object-fit: cover;}
.btn-order{ transition: background-color .2s ease;}
.btn-order:hover{ background: #252525;}
.btn-download{ transition: background-color .2s ease;}
.btn-download:hover{ background: #252525;color: #fff;text-decoration: none;}
.btn-review{ transition: background-color .2s ease,border-color .2s ease;}
.btn-review:hover{ background: #252525;border-color: #252525;}
.opt{ transition: border-color .2s ease,box-shadow .2s ease;}
.opt:hover{ border-color: var(--blue);box-shadow: 0 2px 8px rgba(0,59,107,.1);}
.swatches img{ transition: transform .18s ease,box-shadow .18s ease;cursor: pointer;}
.swatches img:hover{ transform: scale(1.18);box-shadow: 0 0 0 2px #fff,0 0 0 3px var(--blue);}
.gallery-thumbs .swiper-slide{ transition: opacity .2s ease,transform .2s ease;}
.gallery-thumbs .swiper-slide:hover{ opacity: 1; /* transform: translateY(-2px); */}
.review-card{ transition: all .3s ease-out;}
.review-card:hover{ transform: translateY(-10px);box-shadow: 0 2px 8px 2px rgba(0,0,0,.05);}
.review-card__img img{ transition: transform .3s ease;}
.review-card:hover .review-card__img img{ transform: scale(1.06);}
.stat{ transition: transform .2s ease;}
.stat:hover{ transform: translateY(-2px);}
.secure{ transition: color .2s ease;}
.components__item,.fitment__item{ transition: transform .18s ease;}
.components__item:hover,.fitment__item:hover{ transform: translateX(3px);}
.marine-trade{ transition: box-shadow .2s ease;}
.marine-trade:hover{ box-shadow: 0 6px 18px rgba(0,0,0,.1);}
.marine-trade__bg{ transition: transform .3s ease;}
.marine-trade:hover .marine-trade__bg{ transform: scale(1.03);}
body .gallery__nav{ padding: 0!important;}
.swatch-hint{ font-size: 14px;color: #6b7280;margin: 0 0 16px;}
.swatch-grid{ display: flex;gap: 9px;justify-content: center;overflow-x: auto;padding-bottom: 4px;}
.swatch{ min-width: 120px;border: 1px solid #e5e7eb;border-radius: 8px;overflow: hidden;background: #fff;text-align: center;cursor: pointer;transition: box-shadow .2s ease,transform .2s ease;padding: 7px;}
.swatch:hover{ box-shadow: 0 4px 12px rgba(0,0,0,.12);transform: translateY(-2px);}
.swatch .thumb{ display: block;width: 100%;height: 80px;object-fit: cover;}
.swatch-info{ padding: 0;}
.swatch-name{ display: block;font-size: 13px;font-weight: 700;}
.swatch-code{ display: block;font-size: 12px;color: #000;margin-top: 0;font-weight: 600;}
.swatch-option{ display: inline-flex;padding: 0;border: 2px solid transparent;border-radius: 0;cursor: pointer;transition: border-color .15s ease;}
.swatch-option input{ position: absolute;opacity: 0;width: 0;height: 0;}
.swatch-option:has(input:checked){ border-color: transparent;}
.box-cls{ gap: 30px;display: flex;flex-direction: column;}

.fabric-cls{display: flex;justify-content: space-between;    border-bottom: 1px solid var(--border);    flex-wrap: wrap;}



/*-------step-2-------------*/


.page-container{ max-width: 1470px; padding-left: 15px; padding-right: 15px; margin-left: auto; margin-right: auto; }
.ab-page section + section{ margin-top: 25px;}
.hero-top{ position: relative;display: flex;align-items: flex-start;min-height: 377px;}
.hero-left{ position: relative;z-index: 2;max-width: 704px;flex-shrink: 0;padding-top: 24px;}
.breadcrumb{ margin: 0 0 20px;font-size: 14px;color: var(--text-light);}
.breadcrumb span{ font-weight: 600;color: var(--blue);}
.hero-heading-wrap{ margin-bottom: 20px;}
.hero-title{ margin: 0 0 12px;font-weight: 700;font-size: 60px;line-height: 1.15;}
.hero-title .line-dark{ display: block;color: #000;}
.hero-title .line-blue{ display: block;color: var(--blue);}
.hero-desc{ margin: 0;font-size: 16px;line-height: 28px;color: var(--text-body);max-width: 704px;}
.badge-row{ display: flex;align-items: center;flex-wrap: wrap;}
.badge-item{ display: flex;align-items: center;gap: 12px;padding: 0 30px 0 15px;border-right: 1px solid rgba(0,59,107,.2);}
.badge-item:first-child{ padding-left: 0;}
.badge-item--last{ border-right: 0;padding-right: 20px;}
.badge-icon{ position: relative;display: block;overflow: hidden;flex-shrink: 0;width: 30px;height: 34px;}
.badge-icon img{ position: absolute;max-width: none;}
.badge-icon--1 img{ left: -30.05%;top: -32.64%;width: 491.83%;height: 160.88%;}
.badge-icon--2{ width: 33px;}
.badge-icon--2 img{ left: -169.08%;top: -30.89%;width: 447.12%;height: 160.88%;}
.badge-icon--3{ width: 35px;}
.badge-icon--3 img{ left: -302.5%;top: -40.39%;width: 421.57%;height: 160.88%;}
.badge-text{ font-weight: 600;font-size: 16px;color: var(--text-dark);white-space: nowrap;}
.hero-right{ position: absolute;z-index: 1;top: -1px;right: 0;max-width: 880px;width: 100%;height: 377px;}
.hero-shape{ position: absolute;left: 53px;top: 0;width: 275px;height: 377px;z-index: 1;background-color: var(--hero-shape-color);clip-path: polygon(36.36% 0,100% 0,63.64% 100%,0 100%);}
.hero-boat{ position: absolute;left: 175px;top: 0;max-width: 705px;width: 100%;height: 376px;object-fit: cover;}
.finder-card{ margin-top: 20px;background: var(--finder-bg);border-radius: 15px;padding: 19px 28px;}
.finder-header{ display: flex;align-items: center;gap: 12px;margin-bottom: 15px;}
.finder-search-icon{ width: 24px;height: 24px;}
.finder-title{ margin: 0;font-weight: 700;font-size: 18px;color: #fff;white-space: pre;}
.dropdowns-row{ display: flex;align-items: center;gap: 16px;}
.dropdown-selector{ position: relative;flex: 1 1 0;min-width: 0;height: 50px;background: #fff;border: 1px solid #cfcfcf;border-radius: 8px;}
.dropdown-selector select{ appearance: none;-webkit-appearance: none;-moz-appearance: none;width: 100%;height: 100%;margin: 0;padding: 5px 34px 5px 15px;background: 0 0;border: 0;border-radius: 8px;font-family: inherit;font-weight: 500;font-size: 15px;color: var(--text-dark);cursor: pointer;background-image: url("../images/select-down-arrow.svg");background-position: center right 15px;background-repeat: no-repeat;background-size: 16px;}
.dropdown-selector select:focus{ outline: 0;}
.dropdown-selector .dropdown-chevron{ position: absolute;right: 15px;top: 50%;transform: translateY(-50%);width: 8px;height: 4px;pointer-events: none;}
.submit-btn{ flex: 0 0 199px;height: 50px;padding: 5px 15px;border: 0;border-radius: 8px;background: var(--green);color: #fff;font-weight: 700;font-size: 16px;transition: all .3s ease-in-out 0s;}
button.submit-btn:hover{ background: #019e5f;}
.finder-footer{ margin: 15px 0 0;display: flex;flex-wrap: wrap;gap: 8px;justify-content: center;text-align: center;font-size: 15px;}
.finder-footer,.finder-footer a{ font-weight: 500;color: rgba(255,255,255,.7);}
.finder-footer a{ font-weight: 700;color: #fff;text-decoration: underline;}
.finder-footer a:hover{ text-decoration: none;}
.section-title{ margin: 0 0 62px;font-weight: 700;font-size: 40px;letter-spacing: .6px;color: var(--dark-navy);text-align: center;}
.products-section .section-title{ margin-bottom: 25px;}
.cards-row{ display: flex;gap: 16px;align-items: stretch;}
.product-card{ flex: 1 1 0;min-width: 0;background: #fff;border: 1px solid var(--border-light);border-radius: 14px;padding: 14px;display: flex;flex-direction: column;gap: 28px;transition: all .3s ease-in-out 0s;}
.product-card:hover{ border-color: rgba(0,59,107,.15);box-shadow: 0 12px 24px rgba(0,59,107,.12);}
.product-img{ display: block;width: 100%;aspect-ratio: 16/11;border-radius: 10px;overflow: hidden;}
.product-img img{ width: 100%;height: 100%;object-fit: contain;transition: transform .3s ease;}
.product-img:focus-visible img,.product-img:hover img{ opacity: .7;}
.card-info{ display: flex;flex-direction: column;gap: 8px;}
.product-name{ margin: 0;font-weight: 700;font-size: 15px;color: var(--text-dark);}
.product-name a{ color: inherit;transition: color .2s ease;}
.product-name a:focus-visible,.product-name a:hover{ color: var(--blue);}
.tags-row{ display: flex;gap: 6px;}
.tag{ padding: 3px 8px;border-radius: 4px;background: var(--tag-bg);font-weight: 600;font-size: 12px;color: var(--blue);white-space: nowrap;}
.tag--cyan{ background: var(--tag-cyan-bg);}
.price-action{ display: flex;align-items: center;justify-content: space-between;padding-top: 6px;}
.price-col{ display: flex;flex-direction: column;}
.price-label{ font-size: 11px;color: var(--text-muted);}
.price-value{ font-weight: 700;font-size: 16px;color: var(--blue);}
.view-btn{ border: 0;border-radius: 8px;background: var(--blue);color: #fff;font-weight: 700;font-size: 12px;padding: 7px 12px;white-space: nowrap;transition: all .3s ease-in-out 0s;}
.view-btn:hover{ background: var(--green);}
.view-all-wrap{ display: flex;justify-content: center;margin-top: 39px;}
.btn-pill{ border: 0;border-radius: 30px;background: var(--green);color: #fff;font-weight: 600;font-size: 15px;padding: 16px 20px;white-space: nowrap;transition: all .3s ease-in-out 0s;}
.btn-pill:hover{ background: var(--text-dark);}
.about-section{ display: flex;align-items: center;gap: 70px;}
.about-image{ flex-shrink: 0;width: 398px;height: 327px;border-radius: 30px;overflow: hidden;}
.about-image img{ width: 100%;height: 100%;object-fit: cover;}
.about-content{ flex: 1 1 0;min-width: 0;}
.about-title{ margin: 0 0 15px;font-weight: 700;font-size: 40px;color: var(--text-dark);}
.about-text{ margin: 0;font-size: 18px;line-height: 30px;color: #000;max-width: 962px;}
.info-banners-section{ display: flex;gap: 24px;}
.info-card{ flex: 1 1 0;min-width: 0;background: #fff;border: 1px solid var(--card-border);border-radius: 20px;padding: 25px;display: flex;flex-direction: column;gap: 25px;}
.info-card-top{ display: flex;gap: 15px;}
.info-icon{ position: relative;display: block;overflow: hidden;flex-shrink: 0;width: 50px;height: 51px;}
.info-icon img{ position: absolute;max-width: none;}
.info-icon--1 img{ left: -36.01%;top: -31.45%;width: 498.17%;height: 163.8%;}
.info-icon--2 img{ left: -192.55%;top: -30.84%;width: 498.17%;height: 163.8%;}
.info-icon--3{ height: 48px;}
.info-icon--3 img{ left: -329.99%;top: -31.3%;width: 469.61%;height: 163.93%;}
.info-card-text{ flex: 1 1 0;min-width: 0;}
.info-card-heading{ margin: 0 0 8px;font-weight: 700;font-size: 18px;line-height: 28px;color: var(--dark-navy);}
.info-card-text > p{ margin: 0;font-size: 16px;line-height: 28px;color: var(--text-body);}
.info-card-actions{ display: flex;gap: 15px;flex-wrap: wrap;}
.pill-btn{ display: flex;align-items: center;justify-content: center;gap: 10px;height: 42px;padding: 0 15px;border: 0;border-radius: 30px;font-weight: 500;font-size: 16px;color: #fff;white-space: nowrap;transition: all .3s ease-in-out 0s;}
.pill-btn img{ width: 15px;height: 15px;}
.pill-btn--blue{ background: var(--blue);}
.pill-btn--blue:hover{ background: var(--text-dark);}
.pill-btn--green{ background: var(--green);}
.pill-btn--green:hover{ background: var(--text-dark);}
.check-list li{ display: flex;align-items: flex-start;gap: 8px;padding: 1px 0;font-size: 16px;line-height: 28px;color: var(--text-body);}
.check-list li img{ width: 20px;height: 20px;margin-top: 4px;flex-shrink: 0;}
.check-list--sm li img{ width: 16px;height: 16px;margin-top: 6px;}
.info-card-top--why{ align-items: flex-start;}
.info-card-top--why .info-card-heading{ margin-bottom: 12px;}
.faq-brands-section{ display: flex;gap: 48px;}
.brands-col,.faq-col{ flex: 1 1 0;min-width: 0;}
.faq-heading{ margin: 0 0 24px;font-weight: 700;font-size: 26px;color: var(--text-dark);}
.faq-list{ display: flex;flex-direction: column;gap: 16px;}
.faq-item{ border-bottom: 1px solid #e5e7eb;padding-bottom: 17px;}
.faq-question{ width: 100%;display: flex;align-items: center;justify-content: space-between;gap: 16px;background: 0 0;border: 0;padding: 0;text-align: left;font-weight: 500;font-size: 16px;line-height: 24px;color: #000;}
.faq-question img{ width: 20px;height: 20px;flex-shrink: 0;transition: transform .25s ease;}
.faq-item.is-open .faq-question img{ transform: rotate(180deg);}
.faq-answer{ max-height: 0;overflow: hidden;opacity: 0;transition: max-height .3s ease,opacity .25s ease,margin-top .3s ease;}
.faq-item.is-open .faq-answer{ opacity: 1;margin-top: 12px;}
.showsgippingaddress{ display: grid;grid-template-rows: 0fr;width: 100%;transition: grid-template-rows .35s ease;}
.showsgippingaddress.is-open{ grid-template-rows: 1fr;}
.showsgippingaddress .shippingaddress-inner{ min-height: 0;overflow: hidden;display: flex;flex-direction: column;gap: 14px;opacity: 0;transition: opacity .3s ease;}
.showsgippingaddress.is-open .shippingaddress-inner{ opacity: 1;}
.form-field.billing_businessname{ display: grid;grid-template-rows: 0fr;margin-top: -14px;transition: grid-template-rows .35s ease,margin-top .35s ease;}
.form-field.billing_businessname.is-open{ grid-template-rows: 1fr;margin-top: 0;}
.billing_businessname .businessname-inner{ min-height: 0;overflow: hidden;display: flex;flex-direction: column;gap: 6px;opacity: 0;transition: opacity .3s ease;}
.billing_businessname.is-open .businessname-inner{ opacity: 1;}
.form-field.shipping_businessname{ display: grid;grid-template-rows: 0fr;margin-top: -14px;transition: grid-template-rows .35s ease,margin-top .35s ease;}
.form-field.shipping_businessname.is-open{ grid-template-rows: 1fr;margin-top: 0;}
.shipping_businessname .businessname-inner{ min-height: 0;overflow: hidden;display: flex;flex-direction: column;gap: 6px;opacity: 0;transition: opacity .3s ease;}
.shipping_businessname.is-open .businessname-inner{ opacity: 1;}
.faq-answer p{ margin: 0;font-size: 15px;line-height: 24px;color: var(--text-body);}
.brands-grid{ display: grid;grid-template-columns: repeat(3,1fr);gap: 16px;margin-bottom: 28px;}
.brand-logo{ height: 116px;display: flex;align-items: center;justify-content: center;padding: 20px;background: #fff;border: 1px solid transparent;border-radius: 20px;box-shadow: 0 0 0 rgba(0,59,107,0);transition: transform .25s ease,box-shadow .25s ease,border-color .25s ease;}
.brand-logo:focus-visible,.brand-logo:hover{ border-color: rgba(0,59,107,.15);box-shadow: 0 12px 24px rgba(0,59,107,.12);}
.brand-logo img{ max-width: 100%;max-height: 100%;object-fit: contain;}
.shipping-form-page{ padding-top: 0;}
.step-header{ position: relative;overflow: hidden;border-radius: 30px;background: #003d6e;padding: 30px 40px;}
.step-label{ position: relative;margin: 0 0 4px;font-weight: 600;font-size: 18px;line-height: 1.4;color: #fff;}
.step-title{ position: relative;margin: 0;font-weight: 700;font-size: 50px;line-height: 1.15;color: #fff;}
.form-card{ margin-top: 60px;background: #fff;border-radius: 30px;padding: 43px 30px 46px;}
.shipping-form{ display: flex;flex-direction: column;gap: 25px;}
.form-main-grid{ display: flex;gap: 41px;align-items: flex-start;}
.form-col-left{ flex: 1 1 0;min-width: 0;}
.form-col-right{ flex: 0 0 412px;width: 412px;display: flex;flex-direction: column;gap: 13px;}
.form-section{ display: flex;flex-direction: column;gap: 14px;width: 100%;}
.form-section--full{ width: 100%;}
.form-section-head{ display: flex;flex-direction: column;gap: 5px;}
.form-section-title{ margin: 0;font-weight: 700;font-size: 18px;color: var(--blue);}
.form-section-title--lg{ font-size: 20px;}
.form-note{ margin: 0;font-size: 13px;color: var(--text-dark);line-height: 1.4;}
.form-note--green{ font-size: 11px;font-weight: 500;color: var(--green);line-height: 1.5;}
.form-group{ display: flex;flex-direction: column;gap: 8px;width: 100%;}
.form-group-label{ margin: 0;font-weight: 700;font-size: 14px;color: var(--blue);}
.form-two-col{ display: flex;gap: 16px;align-items: flex-start;}
.form-two-col .form-section{ flex: 1 1 0;min-width: 0;}
.field-row{ display: flex;gap: 16px;width: 100%;}
.field-row .form-field{ flex: 1 1 0;min-width: 0;}
.form-field{ display: flex;flex-direction: column;gap: 6px;width: 100%;}
.field-label{ display: flex;align-items: baseline;gap: 4px;font-weight: 600;font-size: 14px;color: var(--text-dark);}
.required{ font-weight: 600;font-size: 12px;color: #ef4444;}
.field-input{ width: 100%;height: 51px;padding: 15px;border: 1px solid #d1d1d1;border-radius: 12px;background: #fff;font-family: inherit;font-size: 14px;color: var(--text-dark);}
.field-input::placeholder{ color: #6e6e6e;}
.field-input:focus{ outline: 0;border-color: var(--blue);}
.field-helper{ margin: 0;font-weight: 500;font-size: 12px;color: var(--green);}
.field-select{ appearance: none;-webkit-appearance: none;-moz-appearance: none;padding-right: 40px;background-image: url("../images/chevron-down.svg");background-repeat: no-repeat;background-position: center right 15px;background-size: 16px;color: #6e6e6e;cursor: pointer;}
.field-select.is-filled{ color: var(--text-dark);}
.field-input-wrap{ position: relative;width: 100%;}
.field-input-wrap .field-input{ padding-right: 40px;}
.field-icon{ position: absolute;right: 15px;top: 50%;transform: translateY(-50%);width: 16px;height: 16px;pointer-events: none;}
.option-row{ display: flex;flex-wrap: wrap;align-items: center;gap: 12px 24px;}
.stack-options{ display: flex;flex-direction: column;gap: 16px;width: 100%;}
.option-item{ display: flex;align-items: center;gap: 10px;cursor: pointer;}
.option-item--block{ width: 100%;}
.option-text{ flex: 1 1 0;min-width: 0;font-weight: 500;font-size: 14px;color: var(--text-dark);cursor: pointer;;}
.checkbox-input,.radio-input{ appearance: none;-webkit-appearance: none;margin: 0;flex-shrink: 0;position: relative;width: 20px;height: 20px;background: #fff;border: 1.5px solid #d1d5db;cursor: pointer;}
.radio-input{ border-radius: 50%;}
.checkbox-input{ border-radius: 4px;}
.checkbox-input:checked,.radio-input:checked{ border-color: var(--blue);}
.radio-input:checked::after{ content: '';position: absolute;left: 50%;top: 50%;width: 10px;height: 10px;border-radius: 50%;background: var(--blue);transform: translate(-50%,-50%);}
.checkbox-input:checked{ background: var(--blue);}
.checkbox-input:checked::after{ content: '';position: absolute;left: 3px;top: 5px;width: 11px;height: 6px;border-left: 2px solid #fff;border-bottom: 2px solid #fff;transform: rotate(-45deg);}
.card-notes-box,.order-summary-card{ width: 100%;background: #fff;border: 1px solid #f3f4f6;border-radius: 12px;padding: 20px 24px;box-shadow: 0 4px 12px rgba(0,0,0,.05);display: flex;flex-direction: column;gap: 15px;}
.order-summary-title{ margin: 0;font-weight: 800;font-size: 14px;letter-spacing: .2px;text-transform: uppercase;color: var(--blue);}
.hr-divider{ width: 100%;margin: 0;border: 0;border-top: 1px solid #e5e7eb;}
.order-product-row{ display: flex;gap: 16px;}
.order-product-img{ flex-shrink: 0;width: 80px;height: 80px;border: 1px solid #d1d5db;border-radius: 6px;overflow: hidden;}
.order-product-img img{ width: 100%;height: 100%;object-fit: cover;}
.order-product-info{ flex: 1 1 0;min-width: 0;display: flex;flex-direction: column;gap: 4px;}
.order-product-name{ margin: 0;font-weight: 700;font-size: 13px;color: var(--text-dark);}
.order-product-meta{ margin: 0;font-weight: 400;font-size: 12px;color: var(--text-dark);}
.order-product-qty-price{ display: flex;align-items: center;justify-content: space-between;font-size: 12px;color: var(--text-dark);}
.order-product-qty-price span:last-child{ font-weight: 700;font-size: 14px;}
.order-price-rows{ width: 100%;display: flex;flex-direction: column;gap: 12px;}
.order-price-row{ display: flex;align-items: center;justify-content: space-between;font-size: 14px;color: var(--text-dark);}
.order-price-label{ font-weight: 700;}
.order-price-value{ font-weight: 600;}
.order-price-muted{ font-weight: 400;font-size: 13px;}
.order-total-block{ width: 100%;display: flex;flex-direction: column;gap: 6px;}
.order-total-row{ display: flex;align-items: center;justify-content: space-between;}
.order-total-label{ font-weight: 700;font-size: 16px;color: var(--text-dark);}
.order-total-value{ font-weight: 800;font-size: 20px;color: var(--blue);}
.order-total-note{ margin: 0;font-weight: 400;font-size: 11px;color: var(--text-dark);}
.payment-methods{ width: 100%;display: flex;flex-direction: column;gap: 10px;}
.payment-methods-label{ margin: 0;font-weight: 700;font-size: 11px;letter-spacing: .2px;text-transform: uppercase;color: var(--text-dark);}
.payment-icons-img{ display: block;width: auto;}
.secure-badge{ width: 100%;display: flex;align-items: flex-start;gap: 15px;background: #e5eef5;border-radius: 12px;padding: 14px;}
.secure-badge-icon{ display: block;flex-shrink: 0;width: 30px;height: 30px;}
.secure-badge-icon img{ display: block;width: 100%;height: 100%;object-fit: contain;}
.secure-badge-text{ display: flex;flex-direction: column;gap: 1px;}
.secure-badge-title{ margin: 0;font-weight: 700;font-size: 14px;text-transform: uppercase;color: var(--text-dark);}
.secure-badge-desc{ margin: 0;font-weight: 500;font-size: 12px;line-height: 1.4;color: var(--text-dark);}
.card-notes-title{ margin: 0;font-weight: 700;font-size: 20px;line-height: 1.4;color: var(--blue);}
.card-notes-hint{ margin: -7px 0 0;font-weight: 600;font-size: 14px;color: var(--green);}
.additional-notes-title{ margin: 0;font-weight: 700;font-size: 18px;color: var(--blue);}
.additional-notes-text{ margin: 0;font-size: 14px;line-height: 1.5;color: rgba(37,37,37,.68);}
.notes-textarea-wrap{ width: 100%;display: flex;flex-direction: column;gap: 2px;}
.notes-textarea{ width: 100%;height: 120px;padding: 12px;border: 1px solid #d1d1d1;border-radius: 8px;font-family: inherit;font-size: 14px;color: var(--text-dark);resize: vertical;}
.notes-textarea::placeholder{ color: #6e6e6e;}
.notes-textarea:focus{ outline: 0;border-color: var(--blue);}
.notes-char-count{ margin: 0;font-size: 12px;color: rgba(0,0,0,.35);}
.upload-field{ width: 100%;display: flex;flex-direction: column;gap: 13px;}
.upload-label{ margin: 0;font-weight: 600;font-size: 12px;color: var(--text-dark);}
.upload-area{ display: flex;align-items: center;gap: 16px;background: #f9fafb;border: 1px dashed #d1d5db;border-radius: 8px;padding: 16px;}
.upload-btn{ flex-shrink: 0;background: #fff;border: 1.5px solid var(--blue);border-radius: 6px!important;padding: 10px 16px!important;font-weight: 700!important;font-size: 13px!important;color: var(--blue);transition: all .3s ease-in-out 0s;}
.upload-btn:hover{ background: var(--blue);color: #fff;}
.upload-note{ flex: 1 1 0;min-width: 0;margin: 0;font-size: 12px;color: #6b7280;}
.visually-hidden{ position: absolute;width: 1px;height: 1px;padding: 0;margin: -1px;overflow: hidden;clip: rect(0,0,0,0);white-space: nowrap;border: 0;}
.form-footer-actions{ display: flex;justify-content: center;padding-top: 16px;}
.btn-continue{ display: flex;align-items: center;justify-content: center;gap: 10px;min-width: 278px;height: 50px;padding: 7px 15px;border: 0;border-radius: 30px;background: var(--blue);color: #fff;font-weight: 700;font-size: 15px;transition: all .3s ease-in-out 0s;}
.btn-continue:hover{ background: var(--green);}
.btn-icon{ width: 16px;height: 16px;}
.form-two-gap{ gap: 18px;}
.step-bb-img-sec{ background-color: #003b6b;background-repeat: no-repeat;background-position: center right;background-size: cover;}
.Additional-notes-wrap h3 {margin-bottom:5px;}


.gallery-thumbs .swiper-slide {display: flex; justify-content: center;}
.swiper.gallery-thumbs {/*display: flex; justify-content: center; */ padding: 5px 0px; text-align: center;}
.gallery-thumbs .swiper-slide.swiper-slide-thumb-active img {outline: 2px solid #003b6b;}



.gallery-thumbs .swiper-wrapper {width: auto; display: inline-flex;}



/*-------step-3 (Payment & Review)-------------*/

.shipping-form-step-3 .pr-header-water{ position: absolute;inset: 0;width: 100%;height: 100%;object-fit: cover;opacity: .4;pointer-events: none;}
.shipping-form-step-3 .pr-header-row{ position: relative;z-index: 1;display: flex;align-items: center;justify-content: space-between;gap: 20px;width: 100%;}
.shipping-form-step-3 .pr-stepper{ display: flex;gap: 20px;align-items: center;flex-shrink: 0;}
.shipping-form-step-3 .pr-stepper-step{ display: flex;gap: 12px;align-items: center;}
.shipping-form-step-3 .pr-stepper-indicator{ width: 32px;height: 32px;border-radius: 16px;display: flex;align-items: center;justify-content: center;flex-shrink: 0;}
.shipping-form-step-3 .pr-stepper-indicator--done{ background: var(--green);}
.shipping-form-step-3 .pr-stepper-indicator--done img{ width: 14px;height: 10px;}
.shipping-form-step-3 .pr-stepper-indicator--active{ background: #fff;color: var(--blue);font-weight: 700;font-size: 14px;}
.shipping-form-step-3 .pr-stepper-label{ font-weight: 600;font-size: 16px;color: #fff;white-space: nowrap;}
.shipping-form-step-3 .pr-stepper-line{ width: 40px;height: 2px;background: #d4d4d4;flex-shrink: 0;}
.shipping-form-step-3 .pr-columns{ display: flex;gap: 30px;align-items: flex-start;width: 100%;    margin-top: 50px;}
.shipping-form-step-3 .pr-card{ background: #fff;border: 1px solid #e5e5ea;border-radius: 20px;padding: 24px;display: flex;flex-direction: column;gap: 24px;align-self: stretch;}
.shipping-form-step-3 .pr-col-payment{ flex: 0 0 611px;max-width: 611px;width: 100%;}
.shipping-form-step-3 .pr-col-review{ flex: 1 1 0;min-width: 0;gap: 25px;}
.shipping-form-step-3 .pr-section-header{ border-bottom: 1px solid #e5e5ea;padding-bottom: 12px;width: 100%;}
.shipping-form-step-3 .pr-section-title{ margin: 0;font-weight: 700;font-size: 18px;color: var(--blue);}
.shipping-form-step-3 .pr-radio-stack{ display: flex;flex-direction: column;gap: 16px;width: 100%;}
.shipping-form-step-3 .pr-method-row{ border: 1px solid var(--blue);border-radius: 12px;min-height: 68px;display: flex;align-items: center;justify-content: space-between;gap: 12px;padding: 16px;width: 100%;}
.shipping-form-step-3 .pr-method-left{ display: flex;gap: 8px;align-items: center;}
.shipping-form-step-3 .pr-method-icon{ width: 30px;height: 30px;flex-shrink: 0;}
.shipping-form-step-3 .pr-method-label{ font-weight: 600;font-size: 15px;color: #252525;white-space: nowrap;}
.shipping-form-step-3 .pr-brand-logos-row{ display: flex;gap: 6px;align-items: center;height: 26px;flex-wrap: wrap;justify-content: flex-end;}
.shipping-form-step-3 .pr-brand-logo{ display: block;background-image: url("../images/step3-card-logos.png");background-repeat: no-repeat;background-size: 500% auto;background-position-y: center;}
.shipping-form-step-3 .pr-brand-logo--visa-sm{ height: 20px;aspect-ratio: 332/117;background-position-x: 0%;}
.shipping-form-step-3 .pr-brand-logo--mc-sm{ height: 20px;aspect-ratio: 65/30;background-position-x: 25%;}
.shipping-form-step-3 .pr-brand-logo--amex-sm{ height: 20px;aspect-ratio: 65/36;background-position-x: 50%;}
.shipping-form-step-3 .pr-brand-logo--discover-sm{ height: 20px;aspect-ratio: 65/25;background-position-x: 75%;}
.shipping-form-step-3 .pr-brand-logo--visa{ width: 65px;height: 23px;background-position-x: 0%;}
.shipping-form-step-3 .pr-brand-logo--mc{ width: 65px;height: 30px;background-position-x: 25%;}
.shipping-form-step-3 .pr-brand-logo--discover{ width: 65px;height: 25px;background-position-x: 75%;}
.shipping-form-step-3 .pr-brand-logo--amex{ width: 65px;height: 36px;background-position-x: 50%;}
.shipping-form-step-3 .pr-card-brand-group{ display: flex;flex-direction: column;gap: 10px;width: 100%;padding-bottom: 5px;}
.shipping-form-step-3 .pr-card-option{ background: #fff;border: 1px solid #e5e5ea;border-radius: 12px;min-height: 68px;display: flex;align-items: center;justify-content: space-between;gap: 12px;padding: 16px;width: 100%;cursor: pointer;transition: border-color .2s ease,background-color .2s ease;}
.shipping-form-step-3 .pr-card-option.is-selected{ border-color: var(--blue);background: #eff8ff;}
.shipping-form-step-3 .pr-card-option-left{ display: flex;align-items: center;gap: 12px;}
.shipping-form-step-3 .pr-radio-visual{ position: absolute;width: 1px;height: 1px;padding: 0;margin: -1px;overflow: hidden;clip: rect(0,0,0,0);white-space: nowrap;border: 0;}
.shipping-form-step-3 .pr-radio-dot{ width: 20px;height: 20px;border-radius: 10px;background: #fff;border: 1px solid #e5e5ea;display: flex;align-items: center;justify-content: center;flex-shrink: 0;}
.shipping-form-step-3 .pr-card-option.is-selected .pr-radio-dot{ border-color: var(--blue);}
.shipping-form-step-3 .pr-radio-dot-inner{ width: 12px;height: 12px;border-radius: 10px;background: var(--blue);display: none;}
.shipping-form-step-3 .pr-card-option.is-selected .pr-radio-dot-inner{ display: block;}
.shipping-form-step-3 .pr-card-option-text{ font-weight: 500;font-size: 16px;color: #252525;white-space: nowrap;}
.shipping-form-step-3 .pr-card-inputs{ background: #f4f4f4;border-radius: 10px;padding: 15px;display: flex;flex-direction: column;gap: 12px;width: 100%;}
.shipping-form-step-3 .pr-card-inputs-row{ display: flex;gap: 12px;width: 100%;}
.shipping-form-step-3 .pr-card-inputs-field{ flex: 1 1 0;min-width: 0;display: flex;flex-direction: column;gap: 6px;}
.shipping-form-step-3 .pr-input-label{ display: block;margin: 0 0 6px;font-weight: 600;font-size: 16px;color: #252525;}
.shipping-form-step-3 .pr-input-label--sm{ font-size: 13px;font-weight: 600;margin-bottom: 0;}
.shipping-form-step-3 .pr-card-inputs-field .pr-input-label{ margin-bottom: 0;}
.shipping-form-step-3 .pr-input{ width: 100%;background-color: #fff;border: 1px solid #d1d1d1;border-radius: 8px;padding: 12px;font-family: inherit;font-size: 14px;color: #252525; }
.shipping-form-step-3 .pr-input::placeholder{ color: #6e6e6e;}
.shipping-form-step-3 .pr-input:focus{ outline: 0;border-color: var(--blue);}
.shipping-form-step-3 .pr-select{ appearance: none;-webkit-appearance: none;-moz-appearance: none;padding-right: 30px;background-image: url("../images/chevron-down.svg");background-repeat: no-repeat;background-position: center right 10px;background-size: 16px; cursor: pointer;color: #6e6e6e;}
.shipping-form-step-3 .pr-select-wrap{ position: relative;width: 100%;}
.shipping-form-step-3 .pr-select-chevron{ position: absolute;right: 12px;top: 50%;transform: translateY(-50%);width: 16px;height: 16px;pointer-events: none;}
.shipping-form-step-3 .pr-terms-block{ display: flex;flex-direction: column;gap: 10px;width: 100%;padding-bottom: 5px;}
.shipping-form-step-3 .pr-terms-warning-text{ margin: 0;font-weight: 700;font-size: 16px;color: #252525;width: 100%;}
.shipping-form-step-3 .pr-terms-alert{ background: red;border-radius: 10px;padding: 10px 15px;width: 100%;}
.shipping-form-step-3 .pr-terms-alert p{ margin: 0;font-weight: 600;font-size: 16px;color: #fff;}
.shipping-form-step-3 .pr-terms-link{ display: block;padding: 5px 0 10px;font-weight: 500;font-size: 18px;color: var(--green);text-decoration: none;}
.shipping-form-step-3 .pr-terms-link:hover{ text-decoration: underline;}
.shipping-form-step-3 .pr-checkbox-row{ display: flex;gap: 10px;align-items: flex-start;width: 100%;}
.shipping-form-step-3 .pr-checkbox-label{ flex: 1 1 0;min-width: 0;font-weight: 500;font-size: 14px;color: #252525;line-height: normal;cursor: pointer;}
.shipping-form-step-3 .pr-product-item{ display: flex;gap: 16px;align-items: flex-start;width: 100%;    margin: 20px 0;}
.shipping-form-step-3 .pr-product-image{ flex-shrink: 0;width: 110px;height: 90px;border-radius: 8px;overflow: hidden;}
.shipping-form-step-3 .pr-product-image img{ width: 100%;height: 100%;object-fit: cover;display: block;}
.shipping-form-step-3 .pr-product-details{ flex: 1 1 0;min-width: 0;display: flex;flex-direction: column;gap: 2px;}
.shipping-form-step-3 .pr-product-name{ margin: 0;font-weight: 700;font-size: 18px;color: var(--blue);}
.shipping-form-step-3 .pr-product-meta{ margin: 0;font-weight: 400;font-size: 16px;color: #252525;}
.shipping-form-step-3 .pr-product-meta strong{ font-weight: 600;}
.shipping-form-step-3 .pr-review-section{ display: flex;flex-direction: column;gap: 24px;width: 100%;}
.shipping-form-step-3 .pr-contact-block{ display: flex;gap: 14px;align-items: flex-start;width: 100%;}
.shipping-form-step-3 .pr-contact-col{ flex: 1 1 0;min-width: 0;display: flex;flex-direction: column;gap: 4px;}
.shipping-form-step-3 .pr-contact-label{ margin: 0;font-weight: 700;font-size: 16px;color: #6e6e6e;text-transform: uppercase;}
.shipping-form-step-3 .pr-contact-name{ margin: 0;font-weight: 600;font-size: 16px;color: #252525;}
.shipping-form-step-3 .pr-contact-lines{ margin: 0;font-weight: 400;font-size: 16px;line-height: 28px;color: #444;}
.shipping-form-step-3 .pr-pricing-block{ display: flex;flex-direction: column;gap: 12px;width: 100%;}
.shipping-form-step-3 .pr-option-row{ display: flex;align-items: center;justify-content: space-between;width: 100%;gap: 10px;flex-wrap: wrap;}
.shipping-form-step-3 .pr-option-left{ display: flex;flex: 1 1 auto;min-width: 0;gap: 10px;align-items: center;}
.shipping-form-step-3 .pr-option-label{ font-weight: 600;font-size: 18px;color: #252525;white-space: nowrap;}
.shipping-form-step-3 .pr-option-badge{ height: 20px;width: auto;}
.shipping-form-step-3 .pr-toggle{ display: flex;gap: 5px;align-items: center;background: var(--blue);border-radius: 10px;padding: 5px;flex-shrink: 0;}
.shipping-form-step-3 .pr-toggle-btn{ border: 0;background: transparent;border-radius: 8px;padding: 4px 10px;font-weight: 600;font-size: 13px;color: #fff;min-width: 37px;height: 32px;text-align: center;display: inline-flex;align-items: center;justify-content: center;cursor: pointer;transition: background-color .3s ease, color .3s ease;}
.shipping-form-step-3 .pr-toggle-btn input{ position: absolute;opacity: 0;width: 0;height: 0;pointer-events: none;}
.shipping-form-step-3 .pr-toggle-btn.is-active{ background: #fff;color: var(--blue);}
.shipping-form-step-3 .pr-expedite-question{ margin: 0;font-weight: 600;font-size: 16px;color: #252525;width: 100%;}
.shipping-form-step-3 .pr-expedite-box{ background: var(--blue);border-radius: 10px;padding: 10px 15px;display: flex;flex-direction: column;gap: 10px;width: 100%;}
.shipping-form-step-3 .pr-expedite-price{ margin: 0;font-weight: 600;font-size: 16px;color: #fff;}
.shipping-form-step-3 .pr-expedite-highlight{ background: #fff;border-radius: 8px;padding: 10px;display: flex;flex-direction: column;gap: 4px;}
.shipping-form-step-3 .pr-expedite-highlight-title{ margin: 0;font-weight: 600;font-size: 16px;color: var(--green);}
.shipping-form-step-3 .pr-expedite-highlight-sub{ margin: 0;font-weight: 600;font-size: 16px;color: #444;}
.shipping-form-step-3 .pr-totals-block{ display: flex;flex-direction: column;gap: 12px;width: 100%;}
.shipping-form-step-3 .pr-price-row{ display: flex;align-items: center;justify-content: space-between;width: 100%;font-size: 16px;}
.shipping-form-step-3 .pr-price-label{ font-weight: 400;color: #444;}
.shipping-form-step-3 .pr-price-value{ font-weight: 600;color: #252525;}
.shipping-form-step-3 .pr-totals-divider{ width: 100%;margin: 3px 0;border: 0;border-top: 1px solid #e5e5ea;}
.shipping-form-step-3 .pr-total-row{ display: flex;align-items: center;justify-content: space-between;width: 100%;}
.shipping-form-step-3 .pr-total-label{ font-weight: 600;font-size: 18px;color: #252525;}
.shipping-form-step-3 .pr-total-value{ font-weight: 700;font-size: 20px;color: var(--green);}
.shipping-form-step-3 .pr-disclaimer{ background: #fdedad;border-left: 3px solid #f59e0b;border-radius: 8px;padding: 12px;width: 100%;}
.shipping-form-step-3 .pr-disclaimer p{ margin: 0;font-size: 16px;color: #92400e;line-height: normal;}
.shipping-form-step-3 .pr-disclaimer strong{ font-weight: 700;}
.shipping-form-step-3 .pr-action-card{ background: #fff;border: 1px solid #e5e5ea;border-radius: 20px;padding: 24px;display: flex;flex-direction: column;gap: 30px;width: 100%;}
.shipping-form-step-3 .pr-signature-block{ display: flex;flex-direction: column;gap: 20px;width: 100%;padding-top: 8px;}
.shipping-form-step-3 .pr-signature-row{ display: flex;gap: 12px;align-items: flex-start;width: 100%;}
.shipping-form-step-3 .pr-signature-field{ flex: 1 1 0;min-width: 0;display: flex;flex-direction: column;gap: 6px;}
.shipping-form-step-3 .pr-signature-field--select{ flex: 0 0 257px;width: 257px;}
.shipping-form-step-3 .pr-signature-pad-block{ display: flex;flex-direction: column;gap: 10px;width: 100%;}
.shipping-form-step-3 .pr-signature-pad{ position: relative;width: 100%;height: 300px;background: #fff;border: 1px dashed #d1d1d1;border-radius: 8px;overflow: hidden;cursor: crosshair;}
.shipping-form-step-3 .pr-signature-pad canvas{ position: absolute;inset: 0;width: 100%;height: 100%;display: block;}
.shipping-form-step-3 .pr-signature-placeholder{ position: absolute;top: 50%;left: 50%;transform: translate(-50%,-50%);margin: 0;font-size: 14px;color: #6e6e6e;pointer-events: none;}
.shipping-form-step-3 .pr-signature-hint{ margin: 0;font-size: 14px;color: #a8a8a8;line-height: normal;width: 100%;}
.shipping-form-step-3 .pr-submit-row{ display: flex;align-items: flex-start;justify-content: flex-start;width: 100%;}
.shipping-form-step-3 .pr-submit-btn{ background: var(--blue);color: #fff;border: 0;border-radius: 30px;padding: 14px 28px;font-weight: 700;font-size: 16px;display: inline-flex;align-items: center;gap: 10px;transition: background-color .2s ease;}
.shipping-form-step-3 .pr-submit-btn:hover{ background: var(--green);}
.pr-signature-max-w {max-width: 850px; display: flex; flex-direction: column; gap: 20px 0px;}
.shipping-form-step-3 .cla-sing-box {position: relative; width: 100%; font-size: 50px; color: #000; display: flex !important;  align-items: center; border: 2px dashed #ddd !important; background-color: #fff;  padding: 20px !important; min-height: 300px;
  margin: 0; border-radius: 15px; line-height: 1.3;}
.shipping-form-step-3 .loader {width: 50px; height: 50px;}  
.shipping-form-step-3 span.displaynone {color: #f91111; display: none; font-size: 12px; line-height: 1;}
.shipping-form-step-3 .form-text-message { font-size: 12px; font-weight: 400; color: #929292; margin-top: 5px; line-height: 1;}

.shipping-form-step-3 #pricevalue_expedited{ width: 100%;background: #d9e7f8;border-radius: 12px;max-height: 0;opacity: 0;overflow: hidden;padding: 0 20px;transition: max-height .35s ease, opacity .3s ease, padding .35s ease;}
.shipping-form-step-3 #pricevalue_expedited.is-open{ max-height: 600px;opacity: 1;padding: 15px 20px;}
.shipping-form-step-3 #pricevalue_expedited h3{ margin: 0;display: flex;align-items: center;justify-content: space-between;gap: 10px;font-weight: 700;font-size: 15px;color: #252525;}
.shipping-form-step-3 #pricevalue_expedited h3 span{ font-weight: 700;color: var(--green);}
.shipping-form-step-3 #pricevalue_expedited .procetag-imp{ margin-top: 8px;padding-bottom: 10px;border-bottom: 1px solid rgba(0,0,0,.12);}
.shipping-form-step-3 #pricevalue_expedited .procetag-imp h3{ color: #ef4444;}
.shipping-form-step-3 #pricevalue_expedited .procetag-imp h3 span{ color: #ef4444;}
.shipping-form-step-3 #pricevalue_expedited h2{ margin: 10px 0 0;display: flex;align-items: center;justify-content: space-between;gap: 10px;font-weight: 700;font-size: 18px;color: #252525;}
.shipping-form-step-3 #pricevalue_expedited h2 span{ color: var(--green);font-weight: 800;}
.shipping-form-step-3 #pricevalue_expedited .pro-step-price-info{ margin-top: 4px;font-weight: 500;font-size: 12px;line-height: 1.5;color: #ef4444;}

.hero__gallery{position: relative;}
.hero__gallery .hero-boats{
    left: -31px;    width: 130px;z-index: 9999999;
    position: absolute;
    top: 3px;
}

.swatch-option{ position: relative;display: inline-flex;cursor: pointer;gap: 13px;width: 356px;}
.swatch-option input{ position: absolute;opacity: 0;width: 0;height: 0;}
.swatch-option img{ width: 22px;height: 22px;border-radius: 50%;box-shadow: 0 0 0 1px rgba(0,0,0,.12);transition: transform .18s ease,box-shadow .18s ease;}
.swatch-option input:checked + img{ box-shadow: 0 0 0 2px #fff,0 0 0 3px #003b6b;}
.swatch-tip{ position: absolute;bottom: calc(100% + 12px);left: 50%;transform: translateX(-50%) translateY(6px);width: 300px;background: #fff;border: 1px solid #e2e8f0;border-radius: 14px;box-shadow: 0 12px 30px rgba(0,0,0,.18);padding: 14px;display: flex;flex-direction: column;align-items: center;gap: 8px;opacity: 0;visibility: hidden;pointer-events: none;transition: opacity .18s ease,transform .18s ease;z-index: 20;}
.swatch-option:hover .swatch-tip{ opacity: 1;visibility: visible;transform: translateX(-50%) translateY(0);}
.swatch-tip::after{ content: "";position: absolute;top: 100%;left: 50%;transform: translateX(-50%);border: 8px solid transparent;border-top-color: #fff;filter: drop-shadow(0 2px 1px rgba(0,0,0,.06));}
.swatch-tip__name{ font-size: 15px;font-weight: 700;color: #003b6b;text-align: center;line-height: 1.2;}
body .swatch-tip__img img{ width: 100%;height: 136px;border-radius: 0;}
.swatch-tip__code{ font-size: 13px;font-weight: 600;color: #444;}
.review-card__ttl.designcls{ color: #000!important;font-weight: 400;font-size: 15px;margin-bottom: 0;margin-top: 2px;}
.clsoffcolorselection{ pointer-events: none;cursor: default;user-select: none;opacity: .7;}
.opt__input{ width: 18px;height: 18px;margin: 0;flex-shrink: 0;accent-color: #003b6b;cursor: pointer;}
.qty-row{ display: grid;grid-template-columns: repeat(2,1fr);gap: 10px;margin-bottom: 10px;margin-top: 16px;}
.qty-field{ flex: unset;min-width: 0;display: flex;width: 100%;flex-direction: column;gap: 6px;}
.qty-input{ width: 100%;height: 46px;border: 1px solid #d1d5db;border-radius: 10px;padding: 0 14px;font-family: inherit;font-size: 15px;color: #252525;background: #fff;outline: 0;transition: border-color .15s ease,box-shadow .15s ease;}
.qty-input::placeholder{ color: #9aa3ad;}
.qty-input:focus{ border-color: #003b6b;box-shadow: 0 0 0 3px rgba(0,59,107,.12);}
.qty-label{ font-size: 13px;color: #6e6e6e;}
.qty-label b{ color: #003b6b;font-weight: 700;}
.price-loader{ display: none;width: 18px;height: 18px;margin-right: 8px;border: 2px solid rgba(0,59,107,.2);border-top-color: #003b6b;border-radius: 50%;vertical-align: middle;animation: priceSpin .7s linear infinite;}
.price-loader.is-active{ display: inline-block;}
.price--total.is-loading{ opacity: .35;}
@keyframes priceSpin{ to{  transform: rotate(360deg); }}.order-error{ display: none;margin: 10px 0 0;padding: 10px 12px;border: 1px solid #f3c2c2;border-left: 4px solid #e02424;border-radius: 8px;background: #fdeaea;color: #b91c1c;font-size: 14px;font-weight: 600;line-height: 1.4;text-align: center;}
.order-error.is-visible{ display: block;margin-top: 15px;}
.total-row__value{ display: inline-flex;align-items: center;}
.clsredcolor{ border: 1px solid #c80101!important;}





/* ---- Checkout "getting ready" card ---- */
.loaderclss{display: flex;margin-top: 10px;
    align-items: center;
    gap: 15px;}
.accordion-cards {
max-width: 785px;
    margin: 48px auto;
    padding: 32px 36px;
    background: #ffffff;
    border: 1px solid #e3e8ef;
    border-radius: 14px;
    box-shadow: 0 10px 30px rgba(16, 42, 77, 0.08);
    text-align: center;
    color: #1f3a5f;
    font-size: 18px;
    line-height: 1.6;
}


/* ---- Loader row ---- */
.accordion-cards .clsloader {
  margin-top: 22px;
  display: flex;
  justify-content: center;    margin: 30px auto 0 auto;
  align-items: center;
}
 .clsloader img{    width: 39px;}

/* Optional: dim the page behind while preparing */
.accordion-cards #bntloader {
  min-height: 40px;
}









@media (max-width: 1400px) {
 .hero-left{ max-width: 45%;}
}



  /* make it wrap nicely on smaller screens */
@media (max-width: 900px) {
  .swatch-grid { grid-template-columns: repeat(5, 1fr); }
}
@media (max-width: 500px) {
  .swatch-grid { grid-template-columns: repeat(2, 1fr); }
}

/* responsive */


@media (max-width:1500px){ 
   /* .page{  padding: 60px 0; } */
}
@media (max-width:1399px){ 
.swatch-grid{    flex-wrap: wrap;}
  /* .opt{    flex-wrap: wrap;} */
  .opt__text{    font-size: 13px;}
}
@media (max-width: 1299px) {
  .thick-color{flex-wrap: wrap;}.opt{flex: unset;}

}

@media (max-width: 1300px) {
  /* .page-container{ padding: 32px 24px 64px;} */
  .hero-title{ font-size: 48px;}
  .step-title{ font-size: 40px;}
  .form-card{ padding: 32px 24px;}
  .form-main-grid{ gap: 28px;}
  .form-col-right{ flex: 0 0 340px;width: 340px;}
  .hero-left{ max-width: 45%;}
  .hero-desc{ max-width: inherit;}
  .badge-row{ gap: 20px 0;}

  .shipping-form-step-3 .pr-col-payment{ flex: 0 0 460px;max-width: 460px;}
}


@media (max-width:1199px){ 
.btn-order{ width: 54%;text-align: center;margin: auto;}
.box-cls{ flex-direction: row;}
.hardware{ width: fit-content;}
.hero{ flex-wrap: wrap;        justify-content: center;}
.features{    max-width: 56%;    margin: auto;}

.stats-bar{ flex-wrap: wrap;height: auto;gap: 24px 16px;}
.details__top{ flex-wrap: wrap;}
.details__col{ flex: 1 1 45%;}
.details__col:last-child{ flex-basis: 100%;}
.reviews__cards{ flex-wrap: wrap;}
.review-card{ flex: 1 1 45%;}

 .hero-left{ width: 100%;max-width: 100%;padding-top: 0;}
  .hero-top{ flex-direction: column;min-height: 0;}
  .hero-right{ position: relative;top: auto;right: auto;width: 100%;max-width: 100%;height: auto;margin-top: 24px;}
  .hero-shape{ display: none;}
  .hero-boat{ position: static;display: block;width: 100%;height: auto;aspect-ratio: 705/376;left: auto;border-radius: 15px;}
  .ab-page .shipping-form-step-2 section + section{ margin-top: 20px;}

  .hero {flex-wrap: wrap;}
  .hero__gallery {width: 55%;}
  .hero__features {order: 3; width: 100%; flex: 1 1 auto;}
  .purchase{ width: 59%;
        margin: 15px auto;}

  /* .gallery-main .swiper-slide img {max-height: 96%;} */
  


}

@media (max-width: 1100px) {
  .dropdowns-row{ flex-wrap: wrap;}
  .dropdown-selector{ flex: 1 1 calc(50% - 8px);}
  .submit-btn{ flex: 1 1 100%;}
  .cards-row{ flex-wrap: wrap;}
  .product-card{ flex: 1 1 calc(50% - 8px);}
  .about-section{ flex-direction: column;text-align: left;}
  .about-image{ width: 100%;max-width: 460px;height: auto;aspect-ratio: 398/327;}
  .info-banners-section{ flex-wrap: wrap;}
  .info-card{ flex: 1 1 calc(50% - 12px);}
  .faq-brands-section{ flex-direction: column;}
  .form-two-col{ flex-direction: column;}

}


@media (max-width:991px){ 
  .purchase{ flex: unset!important;width: 82%;}
  .features{    max-width: 82%;}
  .total-row{ justify-content: flex-start;padding-top: 5px;gap: 50px;}
  .opt{ flex: unset;min-width: 19%;}
  .secure{ justify-content: flex-start;}
  .btn-order{ width: 57%;margin: 0;}
  .details__col{ align-items: center;}
  .specs{ width: fit-content;margin: auto;}
  .fitment{ width: fit-content;}
  .schematic__frame{ width: fit-content;margin: auto;}
  .highlights{ gap: 50px;justify-content: center;flex: none;}
  .hero__features,.purchase{ flex-basis: 100%;}
  .details__col{ flex-basis: 100%;}
  .card-inputs__title{ font-size: 22px;}
  .review-card{ flex-basis: 100%;}

  .form-main-grid{ flex-direction: column;}
  .form-col-right{ width: 100%;flex: 1 1 100%;}
  .form-col-left{ width: 100%;}
  .shipping-form-step-2 .payment-methods{ align-items: flex-start;}


  .hero__gallery{ width: 100%;}
.gallery__stage{ max-width: 100%;margin: auto;height: 420px;}
.hero__features{ flex: 1 1 40%;padding-top: 0; order: inherit;}
/* .purchase{ width: 55%;} */


.stats-bar {justify-content: flex-start;}
.stats-bar .stat {width: 29.333%;}

.gallery-main .swiper-wrapper {display: flex; align-items: center;}


.shipping-form-step-3 .pr-columns{ flex-wrap: wrap;}
.shipping-form-step-3 .pr-col-payment{ flex: 1 1 100%;max-width: 100%;}
.shipping-form-step-3 .pr-col-review{ flex: 1 1 100%;}
.shipping-form-step-3 .pr-header-row{ flex-direction: column;align-items: flex-start;gap: 16px;}




}
@media (max-width:767px){ 
    .purchase{width: 100%;}
  .features{    max-width: 100%;}
  .thick-color{flex-wrap: wrap;}
  .swatches { position: relative; }
   .swatch-option { position: static; }
   .swatch-tip {
      left: 0;
      right: 0;
      margin-inline: auto;
      width: 180px;
      max-width: calc(100% - 8px);
      transform: translateY(6px);
   }
   .swatch-option:hover .swatch-tip { transform: translateY(0); }
   .swatch-tip::after { left: 50%; transform: translateX(-50%); }
  /* .purchase{ width: 78%;} */
  .highlights{ gap: 30px;}
  /* .page{ padding: 24px 0;} */
  .container{ max-width: calc(100% - 30px);}
  .hero{ padding: 16px;border-radius: 20px;}
  .gallery__stage{ height: auto;padding: 20px;}
  /* .gallery-main .swiper-slide img{ max-height: 280px;} */
  .features__title{ font-size: 24px;}
  .features__subtitle{ font-size: 18px;}
  .card-inputs,.details,.stats-bar{ padding: 24px 16px;}
  .card-inputs__title{ font-size: 20px;}
  .price--big .price__dollars{ font-size: 34px;}
  .specs__key{ width: 140px;}
  .highlight__label{ font-size: 10px;}

  .hero-title{ font-size: 36px;}
  .hero-desc{ font-size: 15px;}
  .badge-row{ gap: 12px 0;}
  .badge-item{ padding: 0 16px 0 0!important;border-right: 0!important;}
  .finder-card{ padding: 18px;}
  .dropdown-selector{ flex: 1 1 100%;}
  .section-title{ font-size: 30px;margin-bottom: 32px;}
  .product-card{ flex: 1 1 100%;}
  .about-title{ font-size: 30px;}
  .about-text{ font-size: 16px;line-height: 26px;}
  .info-card{ flex: 1 1 100%;}
  .brands-grid{ grid-template-columns: repeat(2,1fr);}
  .about-section{ gap: 40px;}
  .info-card-top{ flex-direction: column;}
  .badge-row{ flex-direction: column;align-items: flex-start;gap: 20px;}
  .badge-row .badge-text br{ display: none;}
  .step-header{ padding: 24px;}
  .step-title{ font-size: 30px;}
  .form-card{ margin-top: 40px;padding: 24px 16px;border-radius: 20px;}
  .shipping-form{ gap: 24px;}
  .field-row{ flex-direction: column;gap: 20px;}
  .form-footer-actions .btn-continue{ width: 100%;}
  .hero__features {width: 100%; flex: 1 1 100%;}
  .stats-bar .stat {width: 46%;}

  .shipping-form-step-3 .pr-stepper{ flex-wrap: wrap;gap: 12px;}
  .shipping-form-step-3 .pr-card,
  .shipping-form-step-3 .pr-action-card{ padding: 16px;}
  .shipping-form-step-3 .pr-signature-row{ flex-direction: column;}
  .shipping-form-step-3 .pr-signature-field--select{ width: 100%;flex: 1 1 100%;}
  .shipping-form-step-3 .pr-method-row{ flex-wrap: wrap;height: auto;}
  .shipping-form-step-3 .pr-brand-logos-row{ justify-content: flex-start;}
  .shipping-form-step-3 .pr-card-option{ flex-wrap: wrap;height: auto;}
  .shipping-form-step-3 .pr-card-inputs-row{ flex-direction: column;}
  .shipping-form-step-3 .pr-contact-block{ flex-direction: column;gap: 16px;}
  .shipping-form-step-3 .pr-signature-pad{ height: 220px;}
  .shipping-form-step-3 .pr-submit-btn{ width: 100%;justify-content: center;}
  .shipping-form-step-3 .pr-signature-field {width: 100%;}

}
@media (max-width:680px){
  .reviews{flex-direction: column;}
}
@media (max-width:575px){
   .qty-row { flex-direction: column; gap: 12px; }
   .qty-field{width: 100%;}
  .purchase{ width: 100%;}
  .btn-order{ width: 50%;}
  .reviews{ flex-direction: column;}
 }
@media (max-width:479px){ 
  .swatch-tip{    width: 200px;}
  .btn-order{ width: 100%;}
  .box-cls{ flex-direction: column;}
  .specs{ width: 100%;}
  .gallery__nav img{ width: 30px;height: 30px;}
  .opt-row{ gap: 10px;}
  .opt__text{ font-size: 14px;}
  .swatches{ justify-content: flex-start;gap: 10px;}
  .specs__row{ flex-direction: column;gap: 2px;}
  .specs__key{ width: 100%;}
  .marine-trade__overlay{ width: calc(100% - 20px);}

  .hero-title{ font-size: 28px;}
  .finder-title{ font-size: 16px;white-space: normal;}
  .finder-footer{ text-align: left;justify-content: flex-start;}
  .info-card-actions{ flex-direction: column;align-items: stretch;}
  .pill-btn{ width: 100%;}
  .brands-grid{ grid-template-columns: repeat(2,1fr);gap: 12px;}
  .brand-logo{ height: 90px;padding: 12px;}
  .brands-col .btn-pill,.view-all-wrap .btn-pill{ width: 100%;}
  .step-title{ font-size: 24px;}
  .step-label{ font-size: 15px;}
  .card-notes-box,.order-summary-card{ padding: 16px;}
  .upload-area{ flex-wrap: wrap;}
  .gallery-thumbs .swiper-wrapper {width: 100%;} 
  .stats-bar .stat {width: 100%;}

  .shipping-form-step-3 .pr-option-row{ flex-direction: column;align-items: flex-start;}

}














/* ===== NEW: inline field error message (step 2 billing) ===== */
.clsdisabled{    pointer-events: none;
    cursor: default;
    user-select: none;
    opacity: 0.7;}
.errormssage {
   display: block;
   margin: 0px 0 0;
   color: #e02424;
   font-weight: 600;
   line-height: 1.4;
}
.displaynone {
   display: none;
}
.field-error.is-visible { display: block; }
.field-input.has-error { border-color: #e02424 !important; }


/* ===== Old Shield Pickup - detail panels ===== */
.shipping-form-step-2 .oldshield-detail{ display: none; margin-top: 0px; background: #eef4f9; border: 1px solid #dbe6f0; border-radius: 12px; padding: 20px; }
.shipping-form-step-2 .oldshield-detail.is-open{ display: block; }
.shipping-form-step-2 .oldshield-detail-title{ margin: 0 0 8px; font-weight: 700; font-size: 16px; color: var(--blue); }
.shipping-form-step-2 .oldshield-detail-desc{ margin: 0 0 14px; font-size: 14px; color: #252525; line-height: 1.6; }
.shipping-form-step-2 .oldshield-list{ margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 10px; }
.shipping-form-step-2 .oldshield-list li{ font-size: 14px; color: #252525; line-height: 1.6; }
.shipping-form-step-2 .oldshield-detail-note{ margin: 14px 0 0; font-size: 14px; color: #252525; line-height: 1.6; }
.shipping-form-step-2 .oldshield-pickup-grid{ display: flex; gap: 20px; align-items: flex-start; flex-wrap: wrap; }
.shipping-form-step-2 .oldshield-pickup-img{ flex: 0 0 200px; max-width: 200px; }
.shipping-form-step-2 .oldshield-pickup-img img{ width: 100%; height: auto; border-radius: 10px; display: block; }
.shipping-form-step-2 .oldshield-pickup-steps{ flex: 1 1 320px; min-width: 0; }
.shipping-form-step-2 .measure-label{ margin: 10px 0 6px; font-weight: 700; font-size: 14px; color: #252525; }
.shipping-form-step-2 .measure-row{ display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.shipping-form-step-2 .measure-input{ flex: 1 1 0; min-width: 90px; }
.shipping-form-step-2 .measure-options{ display: flex; flex-direction: column; gap: 8px; margin-bottom: 4px; }
.shipping-form-step-2  .option-item.option-item--block{    align-items: flex-start;}
.subclss{align-items: center !important;    gap: 30px;}
.subclss .loader{width: 30px;height: 30px;}
.checkbox-wraps{display: flex;gap: 10px}
.verifcls{flex-direction: column;gap: 8px;}
.incls{    width: fit-content !important;}


.back-btn-wrap {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 12px;
}

.back-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 18px 8px 14px;
    border: 1px solid #d8dee5;
    border-radius: 999px;
    background: var(--blue);
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    transition: all .3s ease-in-out 0s;
}

.back-btn-icon {
    flex-shrink: 0;
    color: fff;
    transition: transform 0.15s ease;
}

.back-btn:hover {
    background: var(--green);
    color: #fff;
}

.back-btn:hover .back-btn-icon {
    color: #fff;
}

.console-photo-preview {
    display: block;
    width: 100%;
    max-width: 220px;
    height: 160px;
    object-fit: cover;
    border-radius: 8px;
    border: 1px solid #d8dee5;
    margin-top: 8px;
}