/*! elementor-pro - v4.2.0 - 31-08-2026 */
.elementor-editor-preview .woocommerce-notices-wrapper{padding:2em 2em .3em}.elementor-editor-preview .woocommerce-notices-wrapper.elementor-loading{opacity:.3}.e-wc-message-notice .woocommerce-message{background-color:#fafbf5;border:0 solid #000;border-radius:var(--message-box-border-radius,0);border-top:3px solid var(--message-message-icon-color,#95ac3c);color:var(--message-message-text-color,#3f444b)}.e-wc-message-notice .woocommerce-message .restore-item,.e-wc-message-notice .woocommerce-message a:not([class]){color:var(--notice-message-normal-links-color,#3f444b);font-family:Roboto;font-size:16px;font-style:normal;font-weight:400;letter-spacing:0;line-height:24px;text-decoration:underline;text-shadow:none;text-transform:none}.e-wc-message-notice .woocommerce-message .restore-item:hover,.e-wc-message-notice .woocommerce-message a:not([class]):hover{color:var(--notice-message-hover-links-color,#3f444b)}.e-wc-message-notice .woocommerce-message .button{background-color:transparent;border-color:var(--message-border-color,#95ac3c);border-radius:var(--message-buttons-border-radius,0);border-style:var(--message-border-type,solid);border-width:1px;color:var(--message-buttons-normal-text-color,#95ac3c);font-family:Roboto,sans-serif;font-size:14px;font-style:normal;font-weight:400;letter-spacing:0;line-height:1;padding:var(--message-buttons-padding,6px 12px);text-shadow:none;text-transform:none;transition-duration:var(--message-buttons-hover-transition-duration,.3s);transition-property:color,background,box-shadow}.e-wc-message-notice .woocommerce-message .button:hover{background-color:transparent;border-color:var(--message-buttons-hover-border-color,#95ac3c);color:var(--message-buttons-hover-text-color,#95ac3c)}.e-wc-message-notice .woocommerce-message:before{color:var(--message-message-icon-color,#95ac3c)}.e-wc-info-notice .e-my-account-tab:not(.e-my-account-tab__dashboard--custom) .woocommerce .woocommerce-info .woocommerce-Button{color:var(--info-buttons-normal-text-color,#3f84b9)}.e-wc-info-notice .woocommerce-info{background-color:#f6f9fb;border:0 solid #000;border-radius:var(--info-box-border-radius,0);border-top:3px solid var(--info-message-icon-color,#3f84b9);color:var(--info-message-text-color,#3f444b)}.e-wc-info-notice .woocommerce-info .button{background-color:transparent;border-color:var(--info-border-color,#3f84b9);border-radius:var(--info-buttons-border-radius,0);border-style:var(--info-border-type,solid);border-width:1px;color:var(--info-buttons-normal-text-color,#3f84b9);font-family:Roboto,sans-serif;font-size:14px;font-style:normal;font-weight:400;letter-spacing:0;line-height:1;padding:var(--info-buttons-padding,6px 12px);text-shadow:none;text-transform:none;transition-duration:var(--info-buttons-hover-transition-duration,.3s);transition-property:color,background,box-shadow}.e-wc-info-notice .woocommerce-info .button:hover{background-color:transparent;border-color:var(--info-buttons-hover-border-color,#3f84b9);color:var(--info-buttons-hover-text-color,#3f84b9)}.e-wc-info-notice .woocommerce-info:before{color:var(--info-message-icon-color,#3f84b9)}.e-wc-error-notice .elementor-widget-woocommerce-my-account .woocommerce .woocommerce-error strong,.e-wc-error-notice .woocommerce-error{color:var(--error-message-text-color,#3f444b)}.e-wc-error-notice .woocommerce-error{background-color:#f9f2f5;border:0 solid #000;border-radius:var(--error-box-border-radius,0);border-top:3px solid var(--error-message-icon-color,#b81c23)}.e-wc-error-notice .woocommerce-error .wc-backward{color:var(--error-message-normal-links-color,#3f444b);font-family:Roboto;font-size:16px;font-style:normal;font-weight:400;letter-spacing:0;line-height:1;text-decoration:underline;text-shadow:none;text-transform:none}.e-wc-error-notice .woocommerce-error .wc-backward:hover{color:var(--error-message-hover-links-color,#3f444b)}.e-wc-error-notice .woocommerce-error:before{color:var(--error-message-icon-color,#b81c23)}div.wc-block-components-notice-banner{--wc-blocks-notice-banner-color:#2f2f2f;--wc-blocks-notice-banner-padding:16px;--wc-blocks-notice-banner-gap:12px;--wc-blocks-notice-banner-gap-smaller:8px;--wc-blocks-notice-banner-gap-large:24px;--wc-blocks-notice-banner-border-radius:4px;--wc-blocks-notice-banner-font-size:.875em;--message-message-icon-color:#4ab866;--info-message-icon-color:#007cba;--error-message-icon-color:#cc1818;align-content:flex-start;align-items:stretch;background-color:#fff;border:1px solid;border-radius:var(--wc-blocks-notice-banner-border-radius);box-sizing:border-box;color:var(--wc-blocks-notice-banner-color);display:flex;font-size:var(--wc-blocks-notice-banner-font-size);font-weight:400;gap:var(--wc-blocks-notice-banner-gap);line-height:1.5;margin:var(--wc-blocks-notice-banner-padding) 0;padding:var(--wc-blocks-notice-banner-padding)!important}div.wc-block-components-notice-banner>.wc-block-components-notice-banner__content{align-self:center;flex-basis:100%;padding-inline-end:var(--wc-blocks-notice-banner-padding);padding-inline-start:0;white-space:normal}div.wc-block-components-notice-banner>.wc-block-components-notice-banner__content:last-child{padding-inline-end:0;padding-inline-start:0}div.wc-block-components-notice-banner>.wc-block-components-notice-banner__content .wc-block-components-notice-banner__summary{font-weight:600;margin:0 0 var(--wc-blocks-notice-banner-gap-smaller)}div.wc-block-components-notice-banner>.wc-block-components-notice-banner__content ol,div.wc-block-components-notice-banner>.wc-block-components-notice-banner__content ul{margin:0 0 0 var(--wc-blocks-notice-banner-gap-large);padding:0}div.wc-block-components-notice-banner>.wc-block-components-notice-banner__content ol li:after,div.wc-block-components-notice-banner>.wc-block-components-notice-banner__content ul li:after{clear:both;content:"";display:block}div.wc-block-components-notice-banner>.wc-block-components-notice-banner__content .wc-forward{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:transparent;border:0;color:var(--wc-blocks-notice-banner-color)!important;float:inline-end;margin:0;opacity:.6;padding:0!important;text-decoration-line:underline;text-underline-position:under}div.wc-block-components-notice-banner>.wc-block-components-notice-banner__content .wc-forward:active,div.wc-block-components-notice-banner>.wc-block-components-notice-banner__content .wc-forward:focus,div.wc-block-components-notice-banner>.wc-block-components-notice-banner__content .wc-forward:hover{opacity:1}div.wc-block-components-notice-banner>svg{background-color:var(--wc-blocks-notice-banner-color);border-radius:50%;fill:#fff;flex-grow:0;flex-shrink:0;padding:2px}div.wc-block-components-notice-banner>.wc-block-components-button{background:transparent none!important;border:0!important;box-shadow:none!important;color:var(--wc-blocks-notice-banner-color)!important;flex:0 0 16px;height:16px!important;margin:6px 0 0 auto!important;min-height:auto!important;min-width:0!important;opacity:.6;outline:none!important;padding:0!important;width:16px!important}div.wc-block-components-notice-banner>.wc-block-components-button>svg{margin:0!important}div.wc-block-components-notice-banner>.wc-block-components-button:active,div.wc-block-components-notice-banner>.wc-block-components-button:focus,div.wc-block-components-notice-banner>.wc-block-components-button:hover{opacity:1}div.wc-block-components-notice-banner.is-error{--wc-blocks-notice-banner-color:var(--error-message-text-color);--wc-blocks-notice-banner-border-radius:var(--error-box-border-radius);background-color:#fff0f0;border-color:var(--wc-blocks-notice-banner-alert-red)}div.wc-block-components-notice-banner.is-error .wc-backward{color:var(--error-message-normal-links-color)}div.wc-block-components-notice-banner.is-error .wc-backward:hover{color:var(--error-message-hover-links-color)}div.wc-block-components-notice-banner.is-error>svg{background-color:var(--error-message-icon-color);transform:rotate(180deg)}div.wc-block-components-notice-banner.is-success{--wc-blocks-notice-banner-color:var(--message-message-text-color);--wc-blocks-notice-banner-border-radius:var(--message-box-border-radius);background-color:#f4fff7;border-color:var(--wc-blocks-notice-banner-alert-green)}div.wc-block-components-notice-banner.is-success .restore-item,div.wc-block-components-notice-banner.is-success a:not([class]){color:var(--notice-message-normal-links-color)}div.wc-block-components-notice-banner.is-success .restore-item:hover,div.wc-block-components-notice-banner.is-success a:not([class]):hover{color:var(--notice-message-hover-links-color)}div.wc-block-components-notice-banner.is-success>svg{background-color:var(--message-message-icon-color)}div.wc-block-components-notice-banner.is-success .button{border-color:var(--message-border-color);border-radius:var(--message-buttons-border-radius);border-style:var(--message-border-type);color:var(--message-buttons-normal-text-color)!important;padding:var(--message-buttons-padding)!important;transition-duration:var(--message-buttons-hover-transition-duration)}div.wc-block-components-notice-banner.is-success .button:hover{border-color:var(--message-buttons-hover-border-color);color:var(--message-buttons-hover-text-color)!important}div.wc-block-components-notice-banner.is-info{--wc-blocks-notice-banner-color:var(--info-message-text-color);--wc-blocks-notice-banner-border-radius:var(--info-box-border-radius);background-color:#f4f8ff;border-color:#007cba}div.wc-block-components-notice-banner.is-info>svg{background-color:var(--info-message-icon-color)}div.wc-block-components-notice-banner.is-info .button{border-color:var(--info-border-color);border-radius:var(--info-buttons-border-radius);border-style:var(--info-border-type);color:var(--info-buttons-normal-text-color)!important;padding:var(--info-buttons-padding)!important;transition-duration:var(--info-buttons-hover-transition-duration)}div.wc-block-components-notice-banner.is-info .button:hover{border-color:var(--info-buttons-hover-border-color);color:var(--info-buttons-hover-text-color)!important}.fs-free-shipping-notice-and-button-wrapper{flex-flow:wrap;place-content:start space-between;align-items:center;display:flex}.fs-free-shipping-notice-text-and-progress-bar-wrapper,.fs-free-shipping-notice-continue-shopping-button-wrapper{flex:0 auto;margin:0 .5em}.fs-free-shipping-notice-progress-bar-wrapper{flex-direction:row;align-items:center;display:flex}.fs-free-shipping-notice-progress-bar{border:1px solid #fff;border-radius:10px;width:100%;height:10px;margin-left:10px;margin-right:10px;position:relative}.fs-free-shipping-notice-progress-bar>span{background-color:#fff;border-top-left-radius:10px;border-bottom-left-radius:10px;height:100%;display:block;position:relative;overflow:hidden}.button.flexible-shipping-free-shipping-button{margin-left:0}.pbl-container{display:flex;justify-content:center;flex-direction:column}.pbl-container .payu-list-banks{list-style-type:none;display:flex;flex-wrap:wrap;margin:0;padding:0;justify-content:center}.pbl-container .payu-list-banks li{padding:5px 3px 0}.pbl-container .payu-list-banks li.payu-inactive{opacity:.5;filter:grayscale(1)}.pbl-container .payu-list-banks li:not(.payu-inactive) label{cursor:pointer}.pbl-container .payu-list-banks li:not(.payu-inactive) label:hover{background:#ddd;border-color:#aaa}.pbl-container .payu-list-banks li label{padding:10px;display:flex;border:1px solid #bbb;transition:all 250ms;width:86px;justify-content:center;align-items:center}.pbl-container .payu-list-banks li label.active{background:#ddd;border-color:#aaa}.pbl-container .payu-list-banks li label img{width:auto;height:31px;object-fit:contain;margin:0 !important;padding:0}.pbl-container .payu-list-banks li label input{display:none}.pbl-container .pbl-error{padding-top:.5em;padding-bottom:.5em;margin-top:.5em;margin-bottom:.5em;display:none}.pbl-container .pbl-error:before{top:.5em}.payu-accept-conditions{margin-top:15px}.payu-accept-conditions .payu-conditions-description{font-size:12px;line-height:120%;margin-top:8px;text-align:justify}.payu-accept-conditions .payu-conditions-description>div{margin:5px 0}.payu-accept-conditions .payu-conditions-description a{text-decoration:underline}.payu-accept-conditions .payu-conditions-description .payu-read-more{text-decoration:underline;cursor:pointer}.payu-accept-conditions .payu-conditions-description .payu-more-hidden{display:none}#payu-card-container{max-width:350px;margin:10px auto 10px;text-align:left;box-sizing:border-box;border:1px solid #bbb;padding:5px;border-radius:5px;background-color:#ddd;color:#333}#payu-card-container .payu-sf-validation-error,#payu-card-container .payu-sf-technical-error{display:none;color:#b21b0f;font-size:13px}#payu-card-container .payu-card-form{background-color:#fff;padding:5px;border-radius:4px;border:1px solid rgba(0,0,0,0)}#payu-card-container .payu-secure-form-invalid:not(.payu-secure-form-focus){border-color:#b21b0f}#payu-card-container label{padding-bottom:2px;font-size:15px}.card-details{clear:both;overflow:auto;margin-top:10px}.card-details .expiration{width:47%;float:left;margin-right:5%}.card-details .cvv{width:47%;float:left}#tokenizeButton{border:none;background:#438f29;padding:8px 15px;cursor:pointer;color:#fff;display:table;margin:10px auto 0}.response-success{color:#438f29}.response-error{color:#900}.autonomy-payu-button{display:flex;align-items:center;text-decoration:none;margin:10px 0}.autonomy-payu-button img{margin-left:10px;width:50px;height:auto}label[for*=payment_method_payu] img{border-radius:0}.payu-pay-error{display:none}.payu-block-method{gap:10px}.payu-block-method-logo{margin-left:5px}.payu-block-installments-label{display:flex;justify-content:space-between;width:100%}.payu-block-installments-label>div{align-items:center;display:flex}.payu-block-list-banks{display:flex;flex-direction:row;flex-wrap:wrap;gap:5px;justify-content:center;margin-top:10px}.payu-block-list-banks>.payu-bank{align-items:center;background-color:#fff;border:1px solid #ccc;cursor:pointer;display:flex;justify-content:center;padding:8px;transition:all 250ms;width:82px}.payu-block-list-banks>.payu-bank.disabled{cursor:not-allowed;filter:grayscale(1);opacity:.5}.payu-block-list-banks>.payu-bank:not(.disabled):hover{background:#eee;border-color:#13100d}.payu-block-list-banks>.payu-bank.active{background:#eee;border-color:#13100d}.payu-block-list-banks>.payu-bank>img{border-radius:0;height:28px;object-fit:contain;width:auto}.block-payu-card{display:flex;flex-wrap:wrap;gap:0 10px;margin:10px 0;padding:10px}.block-payu-card .payu-sf-validation-error{color:#b21b0f;font-size:13px}.block-payu-card>.block-payu-card-number{flex:1 0 100%}.block-payu-card>.block-payu-card-date,.block-payu-card .block-payu-card-cvv{flex:1 0 calc(50% - 10px)}.block-payu-card .payu-card-form{background-color:#fff;border:1px solid #999;border-radius:5px;padding:8px 6px}.block-payu-card .payu-card-form.payu-secure-form-focus{border-color:#666;box-shadow:0 0 0 1px #666}.block-payu-card .payu-card-form.payu-secure-form-invalid:not(.payu-secure-form-focus){border-color:#cc1818}#installment-mini-block{margin:inherit;padding-right:16px;text-align:right}.p24-payment__logo {
  max-width: 80px;
}


.p24-1clicks {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 20px;
}


.p24-1clicks__items {
  display: flex;
  flex-direction: column; 
  gap: 8px;
  align-items: center;
}


.p24-1clicks__label,
.p24-1clicks__or {
  font-size: 75%;
  text-align: center;
}
.p24-1clicks__or {
  display: flex;
  align-items: center;
  gap: 10px;
  white-space: nowrap;
}
.p24-1clicks__or:after,
.p24-1clicks__or:before {
  content: "";
  width: 100%;
  height: 1px;
  background: rgba(0, 0, 0, .2);
}


.p24-1click {
  display: flex;
  gap: 12px;
  align-items: center;
  cursor: pointer;
  background: white;
  border-radius: 6px;
  padding: 10px;
  border: 2px solid transparent;
  outline: none;
  position: relative;
}
.p24-1click__logo { margin: 0; }
.p24-1click__logo img { display: block; }

.p24-1click--active {
  border-color: currentColor;
  outline: 1px solid;
}


.p24-1click--card__number {
  gap: 0.5em;
  display: flex;
  font-size: 110%;
  font-family: monospace;
  align-items: center;
}
.p24-1click--card__number small { font-size: 75%; }

.p24-1click--card__valid {
  font-family: monospace;
  opacity: .8;
  font-size: 80%;
  font-weight: 800;
}


.p24-1click--blik__valid {
  font-family: monospace;
  opacity: .8;
  font-size: 75%;
}

.p24-1clicks--blik {
  width: 100%;
  gap: 12px;
  margin: 4px 0 22px;
}

.p24-1clicks--blik .p24-1clicks__label {
  color: inherit;
  font-size: clamp(12px, .8rem, 14px);
  font-weight: 600;
  line-height: 1.4;
  opacity: .72;
  text-align: left;
}

.p24-1clicks--blik .p24-1clicks__items {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
  gap: 10px;
  width: 100%;
  padding: 0;
  align-items: stretch;
}

.p24-payment-container .p24-1click--blik {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-width: 0;
  min-height: 70px;
  margin: 0;
  padding: 12px 44px 12px 14px;
  color: inherit;
  font: inherit;
  line-height: 1.3;
  text-align: left;
  text-transform: none;
  background: #fff;
  border: 1px solid rgba(15, 23, 42, .18);
  border-radius: 12px;
  box-shadow: 0 1px 3px rgba(15, 23, 42, .06);
  transition: border-color .18s ease, box-shadow .18s ease, background-color .18s ease;
}

.p24-payment-container .p24-1click--blik:hover {
  color: inherit;
  background: #fff;
  border-color: rgba(15, 23, 42, .38);
  box-shadow: 0 4px 12px rgba(15, 23, 42, .09);
}

.p24-payment-container .p24-1click--blik:focus {
  outline: none;
}

.p24-payment-container .p24-1click--blik:focus-visible {
  border-color: #1d4ed8;
  outline: 3px solid rgba(29, 78, 216, .2);
  outline-offset: 2px;
}

/* Selection reads as "chosen", so it stays blue - red would suggest a payment error. */
.p24-payment-container .p24-1click--blik.p24-1click--active {
  color: inherit;
  background: rgba(29, 78, 216, .06);
  border-color: #1d4ed8;
  outline: none;
  box-shadow: 0 0 0 2px rgba(29, 78, 216, .35), 0 6px 16px rgba(15, 23, 42, .1);
}

.p24-payment-container .p24-1click--blik.p24-1click--active .p24-1click--blik__name {
  font-weight: 700;
}

.p24-payment-container .p24-1click--blik.p24-1click--active .p24-1click--blik__valid {
  opacity: .8;
}

.p24-payment-container [hidden] {
  display: none !important;
}

.p24-1click--blik__logo {
  display: flex;
  flex: 0 0 42px;
  align-items: center;
  justify-content: center;
  width: 42px;
}

.p24-1click--blik__logo img {
  width: auto;
  max-width: 42px;
  height: auto;
  max-height: 28px;
  object-fit: contain;
}

.p24-1click--blik__details {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 5px;
  min-width: 0;
}

.p24-1click--blik__name {
  overflow: hidden;
  color: inherit;
  font-size: clamp(13px, .88rem, 15px);
  font-weight: 650;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.p24-1click--blik__valid {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 7px;
  align-items: baseline;
  color: inherit;
  font-family: inherit;
  font-size: clamp(11px, .75rem, 13px);
  line-height: 1.25;
  opacity: .66;
}

.p24-1click--blik__valid strong {
  color: inherit;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.p24-1click__indicator {
  position: absolute;
  top: 50%;
  right: 14px;
  box-sizing: border-box;
  width: 20px;
  height: 20px;
  border: 2px solid rgba(15, 23, 42, .35);
  border-radius: 50%;
  transform: translateY(-50%);
  transition: border-color .18s ease, background-color .18s ease;
}

.p24-1click--active .p24-1click__indicator {
  background: #1d4ed8;
  border-color: #1d4ed8;
}

.p24-1click--active .p24-1click__indicator::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 6px;
  width: 5px;
  height: 9px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

.p24-1clicks--blik .p24-1clicks__or {
  color: inherit;
  font-size: clamp(11px, .75rem, 13px);
  opacity: .65;
}

@media screen and (max-width: 480px) {
  .p24-1clicks--blik {
    margin-bottom: 18px;
  }

  .p24-1clicks--blik .p24-1clicks__items {
    grid-template-columns: minmax(0, 1fr);
  }

  .p24-payment-container .p24-1click--blik {
    min-height: 64px;
    padding: 10px 42px 10px 12px;
    border-radius: 10px;
  }

  .p24-1click--blik__logo {
    flex-basis: 36px;
    width: 36px;
  }

  .p24-1click--blik__logo img {
    max-width: 36px;
    max-height: 24px;
  }

  .p24-1click__indicator {
    right: 12px;
    width: 19px;
    height: 19px;
  }
}


.p24-1click--card__logo {
  margin-bottom: 0;
}


#card-tokenizer {
  display: flex;
  justify-content: center;
  min-width: 280px;
}


.woocommerce table.shop_table .shop_table__cell-description {
  border-top: none;
  padding-top: 0;
  margin: 0;
  opacity: .5;
  font-size: 75%;
}

.p24-one-clicks__intro {
  margin: 0 0 24px;
}

.account-p24-one-clicks-table {
  margin-top: 0;
}

.p24-one-clicks__intro p {
  margin: 0;
  font-size: clamp(13px, .9rem, 15px);
  line-height: 1.5;
  opacity: .8;
}

.p24-one-clicks__note {
  display: flex;
  gap: 10px;
  margin: 16px 0 0;
  padding: 12px 14px;
  font-size: clamp(12px, .82rem, 14px);
  line-height: 1.5;
  background: rgba(15, 23, 42, .04);
  border-left: 3px solid rgba(15, 23, 42, .25);
  border-radius: 6px;
  opacity: .85;
}

.p24-one-clicks__note + .p24-one-clicks__note {
  margin-top: 10px;
}

.p24-account-table {
  width: 100%;
  border-collapse: collapse;
}
.p24-account-table thead th {
  font-weight: 600;
}
.p24-account-table td,
.p24-account-table th {
  vertical-align: top;
}
.p24-account-table .p24-col-actions,
.p24-account-table .p24-cell-actions {
  text-align: right;
  white-space: nowrap;
}
.p24-account-table .p24-col-next-payment,
.p24-account-table .p24-cell-next-payment {
  white-space: nowrap;
}
.p24-account-table .p24-cell-downloads a {
  display: inline-block;
  margin: 2px 0;
}


/* The overlay must cover the BLIK form only, so it needs a positioned container. */
.p24-payment-container {
  position: relative;
}

.p24-waiting {
  position: absolute;
  top: 0; left: 0; bottom: 0; right: 0;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  padding: 12px;
  overflow: auto;
  background: rgba(255, 255, 255, .92);
  backdrop-filter: blur(2px);
}

.p24-waiting.hidden { display: none; }

.p24-waiting__panel {
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: center;
  box-sizing: border-box;
  width: 100%;
  max-width: 320px;
  padding: 18px 20px;
  color: inherit;
  text-align: center;
  background: #fff;
  border: 1px solid rgba(15, 23, 42, .12);
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(15, 23, 42, .12);
}

.p24-waiting__message {
  font-size: clamp(13px, .88rem, 15px);
  font-weight: 600;
  line-height: 1.4;
}

.p24-waiting__hint {
  font-size: clamp(11px, .76rem, 13px);
  line-height: 1.45;
  opacity: .7;
}

.p24-waiting__timer {
  font-size: clamp(12px, .8rem, 14px);
  font-variant-numeric: tabular-nums;
  line-height: 1;
  opacity: .6;
}

.p24-waiting .wc-block-components-spinner {
  position: relative;
  width: 32px;
  height: 32px;
  margin: 0;
}

/* Classic receipt page has no block Spinner component available. */
.p24-waiting__spinner {
  display: block;
  box-sizing: border-box;
  width: 32px;
  height: 32px;
  border: 3px solid rgba(15, 23, 42, .15);
  border-top-color: #1d4ed8;
  border-radius: 50%;
  animation: p24-waiting-spin 900ms linear infinite;
}

@keyframes p24-waiting-spin {
  to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
  .p24-waiting__spinner {
    animation-duration: 2400ms;
  }
}


/* Block checkout only: wrapper exists solely in block-p24-blik. */
.p24-blik-code-field {
  width: 100%;
  max-width: 12.5rem;
  /* Keeps the hint above and the consent below from reading as one block. */
  margin: 14px 0 18px;
}

.p24-blik-code-input { margin-top: 0 !important; }

/* Padding and height stay untouched here - the block text input reserves space for its floating label. */
.p24-blik-code-field .wc-block-components-text-input input {
  font-size: clamp(15px, 1rem, 18px);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.16em;
  text-align: center;
  background: #fff;
  border: 1px solid rgba(15, 23, 42, .18);
  border-radius: 10px;
  box-shadow: 0 1px 3px rgba(15, 23, 42, .06);
  transition: border-color .18s ease, box-shadow .18s ease;
}

.p24-blik-code-field .wc-block-components-text-input input:hover {
  border-color: rgba(15, 23, 42, .38);
}

/* Same accent as a selected alias, so both ways of paying look like one control set. */
.p24-blik-code-field .wc-block-components-text-input input:focus,
.p24-payment-blik .p24-payment-input input[type="text"]:focus {
  border-color: #1d4ed8;
  outline: none;
  box-shadow: 0 0 0 2px rgba(29, 78, 216, .35);
}


.p24-payment-input input[type="text"] {
  padding: 0 1rem;
  width: 100%;
  box-sizing: border-box;
  min-height: 3rem;
}

/* Classic receipt page only: both classes exist solely in templates/receipt_page_blik.php. */
.p24-payment-blik .p24-payment-input {
  max-width: 12.5rem;
}

.p24-payment-blik .p24-payment-input input[type="text"] {
  font-size: clamp(15px, 1rem, 18px);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.16em;
  text-align: center;
  background: #fff;
  border: 1px solid rgba(15, 23, 42, .18);
  border-radius: 10px;
  box-shadow: 0 1px 3px rgba(15, 23, 42, .06);
  transition: border-color .18s ease, box-shadow .18s ease;
}

.p24-payment-blik .p24-payment-input input[type="text"]:hover {
  border-color: rgba(15, 23, 42, .38);
}

/* The placeholder doubles as the label here, so it must not inherit the code spacing. */
.p24-payment-blik .p24-payment-input input[type="text"]::placeholder {
  letter-spacing: normal;
}


.woocommerce-order-pay .p24-payment-container {
  max-width: 500px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

/* Official Google Pay button (PaymentsClient.createButton) - do not restyle inner assets */
.p24-google-pay-button {
  display: block;
  width: 100%;
  min-height: 48px;
  margin: 8px 0;
}

.wc-block-checkout__actions .p24-google-pay-button,
.wc-block-checkout__actions_row .p24-google-pay-button {
  flex: 1 1 auto;
  min-width: 240px;
  width: 100%;
  margin: 8px 0;
}

.p24-google-pay-place-order-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
  opacity: 0 !important;
}


.wc-block-components-radio-control-accordion-content:has(.p24-payment-container:empty) {
  display: none;
}

.p24-methods {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 12px;
}
.p24-methods + .woocommerce-input-wrapper {
  margin-top: 24px;
  display: block;
}
.p24-methods__items {
  --logo-size: 20px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(100px, auto));
  gap: 12px;
  border-radius: 4px;
}
.p24-methods__items--featured {
  --logo-size: 40px;
  grid-template-columns: repeat(auto-fit, minmax(150px, auto));
}
.p24-method-item {
  cursor: pointer;
  display: flex;
  background: white;
  border-radius: 4px;
  padding: 10px;
  flex-direction: column;
  text-align: center;
  justify-content: center;
  align-items: center;
  flex: 0 1 100px;
  border: 1px solid hsla(0, 0%, 7%, .11);
  user-select: none;
  position: relative;
  gap: 8px;
  font-size: 11px;
}
.p24-method-item--active { outline: 2px solid black; }
.p24-method-item picture {
  aspect-ratio: 16/9;
  height: var(--logo-size);
  max-height: var(--logo-size);
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}
.p24-method-item picture img {
  max-width: 100%;
  max-height: var(--logo-size);
}


.p24-payment-container .p24-checkbox:first-child .wc-block-components-checkbox { margin-top: 0; }
input[id^="payment_method_p24-"] + label img { max-height: 30px; }
.p24-payment-container .wc-block-components-notice-banner:first-child { margin-top: 0; }

/* Checkout blocks: prevent checkbox rows from overlapping */
.p24-payment-container .p24-checkbox + .p24-checkbox {
  margin-top: 10px;
}
.p24-payment-container .p24-checkbox .wc-block-components-checkbox {
  margin: 0;
  display: flex;
  align-items: flex-start;
  gap: 10px;
}
.p24-payment-container .p24-checkbox .wc-block-components-checkbox__label {
  line-height: 1.35;
}
.p24-payment-container .p24-checkbox .wc-block-components-checkbox__input {
  margin-top: 2px;
}

.p24-google-pay-button:empty {
  display: none;
}

p24-installment {
  margin: 20px 0;
  display: block;
}
p24-installment[show-modal="true"] { cursor: pointer; }

.p24-currency {
  display: inline-flex;
  align-items: center;
  column-gap: 0.625rem;
  row-gap: 0.5rem;
  flex-wrap: wrap;
}

.p24-currency__select {
  min-width: 5rem;
  margin: 0 !important;
  align-self: center;
}

.p24-currency__submit {
  flex-shrink: 0;
  margin: 0 !important;
  margin-block: 0 !important;
  margin-inline: 0 !important;
  vertical-align: middle;
  align-self: center;
  line-height: 1.4;
  padding-top: 0.35rem !important;
  padding-right: 0.75rem !important;
  padding-bottom: 0.35rem !important;
  padding-left: 0.75rem !important;
}


#p24-3ds-modal {
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  z-index: 9999;
  background-color: rgba(0, 0, 0, 0.6);
  visibility: hidden; opacity: 0;
  transition: opacity 0.3s ease-out, visibility 0.3s ease-out;
  align-items: center; justify-content: center;
  display: flex;
}
#p24-3ds-modal.active {
  display: flex;
  visibility: visible;
  opacity: 1;
}
#p24-3ds-modal .modal-content {
  background: #fff;
  border-radius: 8px;
  padding: 16px;
  max-width: 600px;
  max-height: 80vh;
  width: 100%;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
  display: flex;
  flex-direction: column;
  position: relative;
  transition: transform 0.3s ease-out, opacity 0.3s ease-out;
  transform: translateY(25px);
  opacity: 0;
}
#p24-3ds-iframe-wrapper {
  width: 100%; height: 100%;
  flex-grow: 1;
  min-height: 480px;
}
#p24-3ds-modal.active .modal-content {
  transform: translateY(0px);
  opacity: 1;
}

/* 3DS Loader styles */
.p24-3ds-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
}

.p24-3ds-overlay.hidden {
  display: none !important;
}

.p24-3ds-loader-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 20px;
  padding: 40px 20px;
  text-align: center;
  z-index: 10;
}

.p24-3ds-loader-content .loader {
  width: 48px;
  height: 48px;
  border: 4px solid #d1001f;
  border-top-color: transparent;
  border-radius: 50%;
  animation: p24-spin 1s linear infinite;
}

@keyframes p24-spin {
  to { transform: rotate(360deg); }
}

.p24-3ds-loader-message {
  max-width: 400px;
  font-size: 14px;
  line-height: 1.5;
  color: #fff;
  margin: 0;
  padding: 0 10px;
}

#p24-3ds-loader.hidden {
  display: none !important;
}

#p24-3ds-iframe-wrapper {
  width: 100%;
  height: 100%;
  flex-grow: 1;
  min-height: 480px;
}


#p24-3ds-iframe-wrapper iframe.fullScreenP24 {
  width: 100%;
  height: 100%;
  border: none;
  min-height: 480px;
  display: block;
  visibility: visible;
}


#p24-3ds-iframe-wrapper iframe.hiddenP24 {
  display: none !important;
  visibility: hidden !important;
}



.p24-1clicks__new-card {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  max-width: 450px;
  margin: 16px auto;
  padding: 12px 20px;
  background-color: #fafbfc;
  border: 1.5px solid #d1d5db;
  border-radius: 6px;
  color: #1f2937;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.3px;
  cursor: pointer;
  transition: all 0.2s ease-in-out;
  font-family: inherit;
  text-decoration: none;
  box-shadow: none;
}
.p24-1clicks__new-card-icon {
  flex-shrink: 0;
  width: 18px; height: 18px;
  color: #3b82f6; stroke: currentColor;
}
.p24-1clicks__new-card-text { white-space: nowrap; }
.p24-1clicks__new-card:hover {
  background-color: #f3f4f6;
  border-color: #9ca3af;
  color: #0f172a;
  box-shadow: 0 2px 8px rgba(0,0,0,.08);
}
.p24-1clicks__new-card:hover .p24-1clicks__new-card-icon {
  color: #2563eb; transform: scale(1.05);
}
.p24-1clicks__new-card:active {
  transform: translateY(1px);
  box-shadow: 0 1px 3px rgba(0,0,0,.1);
}
.p24-1clicks__new-card:focus {
  outline: 2px solid #3b82f6;
  outline-offset: 2px;
}
.p24-1clicks__new-card:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  background-color: #f3f4f6;
}


.p24-1click--card {
  --card-bg: linear-gradient(135deg, #ffffff 0%, #f7f7f9 100%);
  --card-border: rgba(0, 0, 0, .06);
  --card-shadow: 0 1px 5px rgba(0, 0, 0, .06);
  --card-shadow-hover: 0 4px 14px rgba(0, 0, 0, .12);
  --accent: #2563eb;
  --text-color: #1f2937;
  --text-color-light: #6b7280;
  --border-radius: 12px;

  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px 16px;
  width: 100%;
  max-width: 220px;                 
  border: 1px solid var(--card-border);
  border-radius: var(--border-radius);
  background: var(--card-bg);
  box-shadow: var(--card-shadow);
  cursor: pointer;
  text-align: left;
  transition: transform .18s ease, box-shadow .18s ease;
}
.p24-1click--card:hover {
  transform: translateY(-2px);
  box-shadow: var(--card-shadow-hover);
}
.p24-1click--card:focus-visible {
  outline: 3px solid color-mix(in oklab, var(--accent) 60%, white 40%);
  outline-offset: 3px;
}


.p24-1click--card-header {
  display: flex;
  gap: 10px;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  min-height: 24px;
}
.p24-1click--card__logo img {
  max-height: 24px;
  width: auto;
  opacity: .95;
}

/* Cards place the selection dot in the header row instead of the vertical centre. */
.p24-1click--card .p24-1click__indicator {
  position: relative;
  top: auto;
  right: auto;
  flex: 0 0 auto;
  margin-left: auto;
  transform: none;
}

.p24-1click--card.p24-1click--active {
  background: rgba(29, 78, 216, .05);
  border-color: #1d4ed8;
  outline: none;
  box-shadow: 0 0 0 2px rgba(29, 78, 216, .35), 0 6px 16px rgba(15, 23, 42, .1);
}


.p24-1click--card__number {
  font-size: 17px;
  font-family: ui-monospace, monospace;
  letter-spacing: 1.5px;
  font-weight: 600;
  color: var(--text-color);
  display: block;
}
.p24-1click--card__number small {
  font-size: 14px;
  color: var(--text-color-light);
  margin-right: 4px;
}


.p24-1click--card__valid {
  font-size: 13px;
  color: var(--text-color-light);
}


@media screen and (max-width: 480px) {
  #p24-3ds-modal {
    padding: 0;
    align-items: flex-end;
  }
  #p24-3ds-modal .modal-content {
    width: 100%; height: 95vh;
    max-width: 100%; max-height: 100%;
    padding: 12px;
    border-radius: 16px 16px 0 0;
    transform: translateY(100%);
    opacity: 1;
  }
  #p24-3ds-modal.active .modal-content { transform: translateY(0); }
  #p24-3ds-iframe-wrapper { height: 100%; min-height: 0; }
  #p24-3ds-iframe-wrapper iframe { min-height: 0; }
  #card-tokenizer iframe { max-width: 100%; width: 100% !important; }

  .p24-1clicks__new-card {
    padding: 10px 16px;
    font-size: 13px;
    max-width: 100%;
  }
  .p24-1clicks__new-card-icon { width: 16px; height: 16px; }

  .p24-1clicks__items {
    width: 100%;
    padding: 0 8px;
  }

  .p24-1clicks__items .p24-1click--card {
    width: 100%;
    max-width: 100%;
    padding: 12px 14px;
  }

  .p24-1click--card__number {
    font-size: 15px;
  }

  .p24-1click--card__valid {
    font-size: 12px;
  }
}


@media screen and (min-width: 481px) {
  #p24-3ds-modal .modal-content {
    height: auto;
    max-height: 90vh;
  }
  .p24-1clicks__items {
    flex-direction: row;
    flex-wrap: wrap;        
    justify-content: center; 
  }
  .p24-1clicks__items .p24-1click--card {
    flex: 0 1 220px;        
    max-width: 220px;
    width: auto;
  }
}

@media screen and (min-width: 779px) and (max-width: 873px) {
  .p24-1clicks__items {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    justify-items: center; 
  }
  .p24-1clicks__items .p24-1click--card {
    width: 100%;
    max-width: 100%;
  }
}

@media screen and (max-width: 768px) {
  #p24-3ds-modal .modal-content {
    max-width: 90%;
    padding: 16px;
    max-height: 92vh;
  }
}

/* Subscription button styles */
.subscription-button {
  display: inline-block;
  padding: 12px 24px;
  font-size: 16px;
  font-weight: 600;
  text-decoration: none;
  border-radius: 4px;
  transition: all 0.3s ease;
  cursor: pointer;
  border: 2px solid transparent;
}

.subscription-button:hover {
  text-decoration: none;
}

.subscription-button--login {
  background-color: #f0f0f0;
  color: #333;
  border-color: #ccc;
}

.subscription-button--login:hover {
  background-color: #e8e8e8;
  border-color: #999;
}

.subscription-button--start {
  background-color: #0073aa;
  color: #fff;
  border-color: #0073aa;
}

.subscription-button--start:hover {
  background-color: #005a87;
  border-color: #005a87;
}

.subscription-button--manage {
  background-color: #28a745;
  color: #fff;
  border-color: #28a745;
}

.subscription-button--manage:hover {
  background-color: #218838;
  border-color: #218838;
}

/* Subscription product UI (shared accent) */
.subscription-period-info,
.subscription-extra-box {
  --p24-sub-accent: #0073aa;
  --p24-sub-accent-hover: #005a87;
  --p24-sub-accent-bg: #e8f4f8;
  --p24-sub-surface: #f8fafb;
  --p24-sub-border: #d8e6ec;
  --p24-sub-text: #1e293b;
  --p24-sub-text-muted: #475569;
}

.subscription-svg-icon {
  display: block;
  flex-shrink: 0;
}

.subscription-period-info {
  margin: 0.75rem 0 0.5rem;
}

.subscription-period-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background-color: var(--p24-sub-accent-bg);
  color: var(--p24-sub-accent);
  padding: 0.5rem 0.875rem;
  border-radius: 999px;
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.4;
  border: 1px solid var(--p24-sub-border);
}

.subscription-period-badge__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--p24-sub-accent);
}

.subscription-period-badge__icon .subscription-svg-icon {
  width: 18px;
  height: 18px;
}

.subscription-extra-box {
  background-color: var(--p24-sub-surface);
  border: 1px solid var(--p24-sub-border);
  border-left: 4px solid var(--p24-sub-accent);
  border-radius: 12px;
  padding: 1.25rem 1.375rem;
  margin: 1.25rem 0;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.06);
}

.subscription-extra-box__title {
  margin: 0 0 1rem;
  font-size: 1.125rem;
  font-weight: 600;
  line-height: 1.35;
  color: var(--p24-sub-text);
}

.subscription-extra-box__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.875rem;
}

.subscription-extra-box__item {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  font-size: 0.9375rem;
  line-height: 1.5;
  color: var(--p24-sub-text-muted);
}

.subscription-extra-box__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 50%;
  background-color: var(--p24-sub-accent-bg);
  color: var(--p24-sub-accent);
}

.subscription-extra-box__text {
  display: block;
  padding-top: 0.2rem;
  color: var(--p24-sub-text-muted);
}

@media (max-width: 480px) {
  .subscription-extra-box {
    padding: 1rem 1.125rem;
  }

  .subscription-extra-box__item {
    gap: 0.625rem;
  }
}

.subscription-button-wrapper {
  margin: 15px 0;
}/**
 * Front-end styles for Recently Viewed Products for WooCommerce.
 *
 * A modern, lightweight and theme-agnostic product-card system. Everything is
 * scoped under the `.rvpw-products` namespace and built on CSS Grid + Flexbox
 * so it adapts to any theme or page builder without depending on theme CSS.
 *
 * Sections
 *   1.  Design tokens (CSS custom properties — override-friendly)
 *   2.  Section + heading
 *   3.  Grid container
 *   4.  Product card (shared by every layout)
 *   5.  Media + badges
 *   6.  Card body (title, rating, price, actions/button)
 *   7.  List layout
 *   8.  Compact modifier (opt-in via the custom CSS class field)
 *   9.  Responsive columns
 *   10. Accessibility, RTL & motion
 *
 * @package RVPW_Recently_Viewed_Products_For_Woocommerce
 */

/* 1. Design tokens -------------------------------------------------------- */
/* Scoped to the section so they never leak, yet remain easy to override from
   a theme or the plugin's custom-CSS field by re-declaring any variable. */
.rvpw-products {
	--rvpw-gap: 20px;
	--rvpw-card-bg: #fff;
	--rvpw-card-border: rgba(17, 24, 39, 0.08);
	--rvpw-card-radius: 12px;
	--rvpw-card-pad: 14px;
	--rvpw-card-shadow: 0 1px 2px rgba(17, 24, 39, 0.04), 0 1px 3px rgba(17, 24, 39, 0.06);
	--rvpw-card-shadow-hover: 0 10px 24px rgba(17, 24, 39, 0.10), 0 3px 8px rgba(17, 24, 39, 0.08);
	--rvpw-image-ratio: 1 / 1;
	--rvpw-image-fit: cover;
	--rvpw-image-bg: #f4f4f5;
	--rvpw-title-color: inherit;
	--rvpw-title-size: 0.95rem;
	--rvpw-muted: #6b7280;
	--rvpw-price-color: inherit;
	--rvpw-price-size: 1rem;
	--rvpw-price-sale-color: inherit;
	--rvpw-btn-bg: #111827;
	--rvpw-btn-color: #fff;
	--rvpw-btn-bg-hover: #1f2937;
	--rvpw-badge-sale-bg: #16a34a;
	--rvpw-badge-out-bg: #6b7280;
	--rvpw-badge-color: #fff;
	--rvpw-focus: #2563eb;
	--rvpw-transition: 0.2s ease;

	margin: 24px 0;
	color: inherit;
}

/* Full-width guarantee --------------------------------------------------- */
/* Block themes constrain direct children of a "constrained" layout to the
   theme content width (`max-width: <content-size>; margin-inline: auto`),
   which can make the section appear narrow and centered. We opt out so the
   section always fills its container for every layout (grid, list, carousel).
   The root class is repeated to beat real-class theme constraints. */
.rvpw-products.rvpw-products {
	box-sizing: border-box;
	width: 100%;
	max-width: 100%;
	margin-inline: 0;
}

/* The inner containers also span the full width of the section. */
.rvpw-products .rvpw-grid,
.rvpw-products .rvpw-carousel {
	width: 100%;
}

/* Local box-sizing reset so theme defaults can't distort the layout. */
.rvpw-products *,
.rvpw-products *::before,
.rvpw-products *::after {
	box-sizing: border-box;
}

/* 2. Section + heading ---------------------------------------------------- */
.rvpw-products .rvpw-heading {
	margin: 0 0 16px;
	padding: 0;
	font-size: 1.35rem;
	font-weight: 600;
	line-height: 1.25;
	letter-spacing: -0.01em;
}

.rvpw-empty {
	margin: 12px 0;
	color: var(--rvpw-muted);
}

/* 3. Grid container ------------------------------------------------------- */
.rvpw-products .rvpw-grid {
	display: grid;
	grid-template-columns: repeat(var(--rvpw-mobile-columns, 2), minmax(0, 1fr));
	gap: var(--rvpw-gap);
	margin: 0;
	padding: 0;
	list-style: none;
}

/* WooCommerce loop reset --------------------------------------------------
   WooCommerce ships default grid styles for `ul.products li.product` (fixed
   percentage widths, floats, clearfix and image margins) that are MORE
   specific than our base classes and would otherwise squeeze every card into a
   narrow floated column. We neutralise them here with a deliberately stronger
   selector (the root class is repeated to raise specificity) so Grid/Flexbox
   owns the layout — no !important required. */
.rvpw-products.rvpw-products ul.rvpw-grid.products,
.rvpw-products.rvpw-products ul.rvpw-grid.products li.product {
	float: none;
	clear: none;
	width: auto;
	max-width: none;
	margin: 0;
}

.rvpw-products.rvpw-products ul.rvpw-grid.products {
	padding: 0;
}

.rvpw-products.rvpw-products ul.rvpw-grid.products::before,
.rvpw-products.rvpw-products ul.rvpw-grid.products::after {
	display: none;
	content: "";
}

.rvpw-products.rvpw-products ul.rvpw-grid.products li.product .rvpw-product__link img {
	margin: 0;
}

/* 4. Product card --------------------------------------------------------- */
.rvpw-products .product.rvpw-product {
	display: flex;
	flex-direction: column;
	height: 100%;
	margin: 0;
	padding: 0;
	width: auto;
	float: none;
	overflow: hidden;
	background: var(--rvpw-card-bg);
	border: 1px solid var(--rvpw-card-border);
	border-radius: var(--rvpw-card-radius);
	box-shadow: var(--rvpw-card-shadow);
	transition: transform var(--rvpw-transition), box-shadow var(--rvpw-transition), border-color var(--rvpw-transition);
}

.rvpw-products .product.rvpw-product:hover,
.rvpw-products .product.rvpw-product:focus-within {
	transform: translateY(-3px);
	box-shadow: var(--rvpw-card-shadow-hover);
	border-color: rgba(17, 24, 39, 0.12);
}

/* 5. Media + badges ------------------------------------------------------- */
.rvpw-products .rvpw-product__media {
	position: relative;
	display: block;
	aspect-ratio: var(--rvpw-image-ratio);
	background: var(--rvpw-image-bg);
	overflow: hidden;
}

.rvpw-products .rvpw-product__link {
	display: block;
	height: 100%;
	text-decoration: none;
}

/* Doubled root class so this wins over WooCommerce's default
   `.woocommerce ul.products li.product a img { height: auto }` and the image
   always fills the square media box instead of shrinking to its natural size. */
.rvpw-products.rvpw-products .rvpw-product__media .rvpw-product__link img {
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	margin: 0;
	padding: 0;
	object-fit: var(--rvpw-image-fit);
	transition: transform 0.4s ease;
}

.rvpw-products .product.rvpw-product:hover .rvpw-product__link img {
	transform: scale(1.04);
}

.rvpw-products .rvpw-product__badge {
	position: absolute;
	top: 10px;
	inset-inline-start: 10px;
	z-index: 1;
	padding: 3px 9px;
	font-size: 0.7rem;
	font-weight: 600;
	line-height: 1.4;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	color: var(--rvpw-badge-color);
	border-radius: 999px;
	pointer-events: none;
}

.rvpw-products .rvpw-product__badge--sale {
	background: var(--rvpw-badge-sale-bg);
}

.rvpw-products .rvpw-product__badge--out {
	background: var(--rvpw-badge-out-bg);
}

/* 6. Card body ------------------------------------------------------------ */
.rvpw-products .rvpw-product__body {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	gap: 8px;
	min-width: 0;
	padding: var(--rvpw-card-pad);
}

.rvpw-products .rvpw-product__title-link {
	text-decoration: none;
	color: var(--rvpw-title-color);
}

.rvpw-products .rvpw-product__title-link:hover .rvpw-product__title,
.rvpw-products .rvpw-product__title-link:focus-visible .rvpw-product__title {
	color: var(--rvpw-focus);
}

.rvpw-products .woocommerce-loop-product__title.rvpw-product__title {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	margin: 0;
	padding: 0;
	min-height: calc(var(--rvpw-title-size) * 1.4 * 2);
	font-size: var(--rvpw-title-size);
	font-weight: 600;
	line-height: 1.4;
	color: inherit;
	word-break: break-word;
}

.rvpw-products .rvpw-product__rating {
	margin: 0;
	font-size: 0.85rem;
	line-height: 1;
}

/* Keep WooCommerce's star widget compact and left-aligned inside the card. */
.rvpw-products .rvpw-product__rating .star-rating {
	margin: 0;
	font-size: 0.85rem;
}

/* Price sits just above the action area; margin-top auto pushes it down so
   the price line stays aligned across cards of differing content height. */
.rvpw-products .price.rvpw-product__price {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 4px 8px;
	margin: auto 0 0;
	padding: 0;
	font-size: var(--rvpw-price-size);
	font-weight: 600;
	line-height: 1.4;
	color: var(--rvpw-price-color);
}

/* Original price: lighter, struck through, sits before the sale price. */
.rvpw-products .price.rvpw-product__price del {
	font-weight: 400;
	color: var(--rvpw-muted);
	opacity: 0.85;
}

.rvpw-products .price.rvpw-product__price del .woocommerce-Price-amount {
	text-decoration: line-through;
}

/* Sale price: emphasised, no underline (WooCommerce uses <ins>). */
.rvpw-products .price.rvpw-product__price ins {
	text-decoration: none;
	font-weight: 700;
	color: var(--rvpw-price-sale-color);
}

.rvpw-products .price.rvpw-product__price .woocommerce-Price-amount {
	white-space: nowrap;
}

/* Actions: button pinned to the bottom of every card. */
.rvpw-products .rvpw-product__actions {
	margin-top: 4px;
}

/* Self-contained button styling (doubled root class so it wins over theme and
   WooCommerce loop button rules) — never depends on theme CSS, but every value
   is driven by an overridable token so a store can recolour it in one line. */
.rvpw-products.rvpw-products .rvpw-product__button.button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	min-height: 42px;
	margin: 0;
	padding: 9px 16px;
	font-size: 0.875rem;
	font-weight: 600;
	line-height: 1.2;
	text-align: center;
	text-decoration: none;
	color: var(--rvpw-btn-color);
	background: var(--rvpw-btn-bg);
	border: none;
	border-radius: 8px;
	box-shadow: none;
	cursor: pointer;
	transition: background var(--rvpw-transition), opacity var(--rvpw-transition);
}

.rvpw-products.rvpw-products .rvpw-product__button.button:hover,
.rvpw-products.rvpw-products .rvpw-product__button.button:focus {
	color: var(--rvpw-btn-color);
	background: var(--rvpw-btn-bg-hover);
}

.rvpw-products.rvpw-products .rvpw-product__button.button.loading {
	opacity: 0.7;
}

.rvpw-products.rvpw-products .rvpw-product__button.button.added {
	opacity: 0.9;
}

/* WooCommerce AJAX "View cart" link that gets injected after add-to-cart. */
.rvpw-products .rvpw-product__actions .added_to_cart {
	display: inline-block;
	margin-top: 8px;
	font-size: 0.8rem;
}

/* 7. List layout ---------------------------------------------------------- */
/* Horizontal card: image on the leading side, info on the trailing side. */
.rvpw-layout-list .rvpw-grid {
	grid-template-columns: 1fr;
	gap: 14px;
}

.rvpw-layout-list .product.rvpw-product {
	flex-direction: row;
	/* Top-align so the media keeps its square ratio instead of stretching to
	   the full (taller) height of the text column. */
	align-items: flex-start;
}

.rvpw-layout-list .rvpw-product__media {
	flex: 0 0 clamp(96px, 30%, 180px);
	width: clamp(96px, 30%, 180px);
	aspect-ratio: 1 / 1;
}

.rvpw-layout-list .rvpw-product__body {
	align-self: stretch;
	justify-content: center;
	gap: 6px;
}

.rvpw-layout-list .woocommerce-loop-product__title.rvpw-product__title {
	/* No need to reserve two lines in the horizontal layout. */
	min-height: 0;
}

.rvpw-layout-list .price.rvpw-product__price {
	margin-top: 0;
}

.rvpw-layout-list .rvpw-product__actions {
	margin-top: 6px;
}

/* Repeated layout class keeps this above the doubled-root button base so the
   list CTA stays inline (auto width) instead of stretching full width. */
.rvpw-layout-list.rvpw-layout-list .rvpw-product__button.button {
	width: auto;
	align-self: flex-start;
}

/* 8. Compact modifier ----------------------------------------------------- */
/* Opt-in: add the class "rvpw-compact" in the plugin's "CSS class" field (or
   the shortcode `class` attribute). Ideal for narrow sidebars and widgets. */
.rvpw-compact .rvpw-grid {
	grid-template-columns: 1fr;
	gap: 10px;
}

.rvpw-compact .product.rvpw-product {
	flex-direction: row;
	align-items: center;
	border: none;
	border-radius: 0;
	box-shadow: none;
	background: transparent;
	border-bottom: 1px solid var(--rvpw-card-border);
	border-radius: 0;
}

.rvpw-compact .product.rvpw-product:last-child {
	border-bottom: none;
}

.rvpw-compact .product.rvpw-product:hover,
.rvpw-compact .product.rvpw-product:focus-within {
	transform: none;
	box-shadow: none;
}

.rvpw-compact .rvpw-product__media {
	flex: 0 0 64px;
	width: 64px;
	border-radius: 8px;
}

.rvpw-compact .product.rvpw-product:hover .rvpw-product__link img {
	transform: none;
}

.rvpw-compact .rvpw-product__badge {
	display: none;
}

.rvpw-compact .rvpw-product__body {
	gap: 4px;
	padding: 4px 0 4px 12px;
}

.rvpw-compact .woocommerce-loop-product__title.rvpw-product__title {
	min-height: 0;
	font-size: 0.85rem;
}

.rvpw-compact .price.rvpw-product__price {
	margin: 0;
	font-size: 0.85rem;
}

.rvpw-compact .rvpw-product__rating,
.rvpw-compact .rvpw-product__actions {
	display: none;
}

/* 9. Responsive columns --------------------------------------------------- */
@media (min-width: 768px) {
	.rvpw-layout-grid .rvpw-grid {
		grid-template-columns: repeat(var(--rvpw-tablet-columns, 3), minmax(0, 1fr));
	}
}

@media (min-width: 1024px) {
	.rvpw-layout-grid .rvpw-grid {
		grid-template-columns: repeat(var(--rvpw-desktop-columns, 4), minmax(0, 1fr));
	}
}

/* Mobile: collapse the list layout to a single, comfortable column. */
@media (max-width: 480px) {
	.rvpw-layout-list:not(.rvpw-compact) .product.rvpw-product {
		flex-direction: column;
	}

	.rvpw-layout-list:not(.rvpw-compact) .rvpw-product__media {
		flex-basis: auto;
		max-width: none;
	}

	.rvpw-layout-list:not(.rvpw-compact) .rvpw-product__button.button {
		width: 100%;
	}
}

/* 10. Accessibility, RTL & motion ----------------------------------------- */
.rvpw-products a:focus-visible,
.rvpw-products .button:focus-visible {
	outline: 2px solid var(--rvpw-focus);
	outline-offset: 2px;
	border-radius: 6px;
}

/* RTL: the logical properties above (inset-inline-*, margin-inline-*) already
   flip automatically; this keeps the badge readable in explicit RTL contexts. */
[dir="rtl"] .rvpw-products .rvpw-product__badge {
	letter-spacing: 0;
}

@media (prefers-reduced-motion: reduce) {
	.rvpw-products .product.rvpw-product,
	.rvpw-products .rvpw-product__link img,
	.rvpw-products .rvpw-product__button.button {
		transition: none;
	}

	.rvpw-products .product.rvpw-product:hover {
		transform: none;
	}

	.rvpw-products .product.rvpw-product:hover .rvpw-product__link img {
		transform: none;
	}
}