/* APBP Store Features — product details under the item name in the cart.
   WooCommerce prints each detail as a <dt>/<dd> pair, and themes usually float
   the label with a fixed width. A longer label — "Personalização" next to
   "Toalha 1" — then runs underneath its own value. A two-column grid keeps the
   values clear of the labels whatever their length, and keeps them aligned. */

.woocommerce .cart_item dl.variation,
.woocommerce-cart-form dl.variation,
.woocommerce-checkout-review-order-table dl.variation,
.woocommerce-table--order-details dl.variation,
.woocommerce-order-details dl.variation,
.woocommerce-mini-cart dl.variation {
    display: grid;
    grid-template-columns: max-content minmax(0, 1fr);
    gap: 2px 10px;
    margin: 0;
    padding: 0;
}

.woocommerce .cart_item dl.variation dt,
.woocommerce .cart_item dl.variation dd,
.woocommerce-cart-form dl.variation dt,
.woocommerce-cart-form dl.variation dd,
.woocommerce-checkout-review-order-table dl.variation dt,
.woocommerce-checkout-review-order-table dl.variation dd,
.woocommerce-table--order-details dl.variation dt,
.woocommerce-table--order-details dl.variation dd,
.woocommerce-order-details dl.variation dt,
.woocommerce-order-details dl.variation dd,
.woocommerce-mini-cart dl.variation dt,
.woocommerce-mini-cart dl.variation dd {
    float: none;
    clear: none;
    width: auto;
    max-width: none;
    min-width: 0;
    margin: 0;
    padding: 0;
    text-align: left;
    overflow-wrap: anywhere;
}

/* WooCommerce wraps each value in a paragraph. */
.woocommerce .cart_item dl.variation dd p,
.woocommerce-cart-form dl.variation dd p,
.woocommerce-checkout-review-order-table dl.variation dd p,
.woocommerce-table--order-details dl.variation dd p,
.woocommerce-order-details dl.variation dd p,
.woocommerce-mini-cart dl.variation dd p {
    margin: 0;
}

/* On a phone the product column is too narrow for two columns: a label like
   "Próximo desconto" leaves its value a sliver, one word per line. There the
   value runs on after its label and wraps under it at full width. */
@media (max-width: 768px) {
    .woocommerce .cart_item dl.variation,
    .woocommerce-cart-form dl.variation,
    .woocommerce-checkout-review-order-table dl.variation,
    .woocommerce-table--order-details dl.variation,
    .woocommerce-order-details dl.variation,
    .woocommerce-mini-cart dl.variation {
        display: block !important;
        line-height: 1.45;
    }

    .woocommerce .cart_item dl.variation dt,
    .woocommerce .cart_item dl.variation dd,
    .woocommerce-cart-form dl.variation dt,
    .woocommerce-cart-form dl.variation dd,
    .woocommerce-checkout-review-order-table dl.variation dt,
    .woocommerce-checkout-review-order-table dl.variation dd,
    .woocommerce-table--order-details dl.variation dt,
    .woocommerce-table--order-details dl.variation dd,
    .woocommerce-order-details dl.variation dt,
    .woocommerce-order-details dl.variation dd,
    .woocommerce-mini-cart dl.variation dt,
    .woocommerce-mini-cart dl.variation dd,
    .woocommerce .cart_item dl.variation dd p,
    .woocommerce-cart-form dl.variation dd p,
    .woocommerce-checkout-review-order-table dl.variation dd p,
    .woocommerce-table--order-details dl.variation dd p,
    .woocommerce-order-details dl.variation dd p,
    .woocommerce-mini-cart dl.variation dd p {
        display: inline !important;
        float: none !important;
        overflow-wrap: normal;
    }

    .woocommerce .cart_item dl.variation dt,
    .woocommerce-cart-form dl.variation dt,
    .woocommerce-checkout-review-order-table dl.variation dt,
    .woocommerce-table--order-details dl.variation dt,
    .woocommerce-order-details dl.variation dt,
    .woocommerce-mini-cart dl.variation dt {
        margin-right: 4px !important;
    }

    /* One line break after each value, before the next label. */
    .woocommerce .cart_item dl.variation dd::after,
    .woocommerce-cart-form dl.variation dd::after,
    .woocommerce-checkout-review-order-table dl.variation dd::after,
    .woocommerce-table--order-details dl.variation dd::after,
    .woocommerce-order-details dl.variation dd::after,
    .woocommerce-mini-cart dl.variation dd::after {
        content: "\A";
        white-space: pre;
    }

    .woocommerce .cart_item dl.variation dd:last-child::after,
    .woocommerce-cart-form dl.variation dd:last-child::after,
    .woocommerce-checkout-review-order-table dl.variation dd:last-child::after,
    .woocommerce-table--order-details dl.variation dd:last-child::after,
    .woocommerce-order-details dl.variation dd:last-child::after,
    .woocommerce-mini-cart dl.variation dd:last-child::after {
        content: none;
    }

    /* The discount line is a flex box elsewhere; here it flows as text, so
       "Poupa…" wraps to the start of the line rather than under the value. */
    dl.variation .bqd-cart-meta,
    dl.variation .bqd-cart-meta__main {
        display: inline !important;
        margin: 0 !important;
    }

    dl.variation .bqd-cart-meta__save {
        display: inline-block;
        margin: 2px 0 0;
    }
}

/* "Faltam 40 unidades para receber…", above the cart table. */
.apbp-gift-hints {
    margin: 0 0 18px;
}

.apbp-gift-hint {
    display: flex;
    align-items: center;
    gap: 14px;
    margin: 0 0 8px;
    padding: 12px 16px;
    border: 1px solid #e3d3b8;
    border-radius: 6px;
    background: #fbf6ee;
    color: #5c4123;
    font-size: 15px;
    line-height: 1.5;
}

.apbp-gift-hint:last-child { margin-bottom: 0; }

/* The gift box: in the hint and on the "Brinde" line. */
.apbp-gift-icon {
    flex: 0 0 auto;
    display: inline-block;
    max-width: none;
    height: auto;
    vertical-align: middle;
    margin: 0;
    border: 0;
    box-shadow: none;
}

/* The "Brinde" line among the items, for gifts by order value. Themes give
   table rows and list items a display, which would beat [hidden]. */
.apbp-gift-line[hidden],
.apbp-gift-flag {
    display: none !important;
}

/* Phones stack the cells; the gift has nothing to remove. */
@media (max-width: 768px) {
    .apbp-gift-line > td.product-remove { display: none !important; }
}

.apbp-gift-line .product-thumbnail .apbp-gift-icon {
    width: 64px;
    max-width: 100%;
}

.apbp-gift-line-note {
    display: block;
    margin-top: 4px;
    color: #8a5f2c;
    font-size: 13px;
    line-height: 1.45;
}

.woocommerce-mini-cart .apbp-gift-line .apbp-gift-icon {
    float: right;
    width: 32px;
    margin-left: 4px;
}

.woocommerce-mini-cart .apbp-gift-line .quantity {
    display: block;
}

.apbp-gift-free { font-weight: 700; }

/* "Com esta encomenda vai receber um brinde", on any page. Where it sits and
   how far from the edges comes from Brindes > Notificação do brinde, as a
   class and two custom properties on the box. */
.apbp-gift-toast {
    --apbp-toast-x: 24px;
    --apbp-toast-y: 24px;
    --apbp-toast-cx: 0;
    --apbp-toast-shift: 16px;
    position: fixed;
    z-index: 999999;
    right: var(--apbp-toast-x);
    bottom: var(--apbp-toast-y);
    box-sizing: border-box;
    display: flex;
    align-items: center;
    gap: 14px;
    max-width: 400px;
    padding: 14px 46px 14px 14px;
    border: 1px solid #e3d3b8;
    border-radius: 8px;
    background: #fbf6ee;
    color: #5c4123;
    font-size: 15px;
    line-height: 1.45;
    box-shadow: 0 12px 32px rgba(60, 40, 20, .2);
    opacity: 0;
    transform: translate(var(--apbp-toast-cx), var(--apbp-toast-shift));
    transition: opacity .25s ease, transform .25s ease;
}

.apbp-gift-toast.is-bottom-left,
.apbp-gift-toast.is-top-left {
    right: auto;
    left: var(--apbp-toast-x);
}

.apbp-gift-toast.is-bottom-center,
.apbp-gift-toast.is-top-center {
    --apbp-toast-cx: -50%;
    right: auto;
    left: 50%;
    width: max-content;
}

/* From the top, it slides down. */
.apbp-gift-toast.is-top-right,
.apbp-gift-toast.is-top-left,
.apbp-gift-toast.is-top-center {
    --apbp-toast-shift: -16px;
    top: var(--apbp-toast-y);
    bottom: auto;
}

.apbp-gift-toast.is-visible {
    --apbp-toast-shift: 0px;
    opacity: 1;
}

.apbp-gift-toast-text {
    font-weight: 600;
}

/* The gift box pops in with the toast, then gives a little shake every few
   seconds, with two sparkles twinkling beside it. */
.apbp-gift-toast-icon {
    position: relative;
    flex: 0 0 auto;
    display: inline-flex;
}

.apbp-gift-toast-icon .apbp-gift-icon {
    transform-origin: 50% 85%;
}

.apbp-gift-toast.is-visible .apbp-gift-toast-icon .apbp-gift-icon {
    animation: apbp-gift-pop .55s cubic-bezier(.34, 1.56, .64, 1) .1s both,
               apbp-gift-shake 3.2s ease-in-out 1s infinite;
}

.apbp-gift-toast-icon::before,
.apbp-gift-toast-icon::after {
    content: "\2726";
    position: absolute;
    color: #d9a441;
    line-height: 1;
    opacity: 0;
    pointer-events: none;
}

.apbp-gift-toast-icon::before {
    top: -6px;
    right: -5px;
    font-size: 13px;
}

.apbp-gift-toast-icon::after {
    bottom: 2px;
    left: -6px;
    font-size: 9px;
}

.apbp-gift-toast.is-visible .apbp-gift-toast-icon::before {
    animation: apbp-gift-twinkle 1.6s ease-in-out .6s infinite;
}

.apbp-gift-toast.is-visible .apbp-gift-toast-icon::after {
    animation: apbp-gift-twinkle 1.6s ease-in-out 1.4s infinite;
}

@keyframes apbp-gift-pop {
    0%   { transform: scale(.3) rotate(-12deg); opacity: 0; }
    100% { transform: scale(1) rotate(0); opacity: 1; }
}

/* The shake takes the first fifth; the rest is a pause. */
@keyframes apbp-gift-shake {
    0%, 22%, 100% { transform: rotate(0) translateY(0); }
    3%  { transform: rotate(-9deg) translateY(-2px); }
    7%  { transform: rotate(8deg) translateY(-3px); }
    11% { transform: rotate(-6deg) translateY(-2px); }
    15% { transform: rotate(4deg) translateY(-1px); }
    19% { transform: rotate(-2deg) translateY(0); }
}

@keyframes apbp-gift-twinkle {
    0%, 100% { opacity: 0; transform: scale(.4) rotate(0); }
    50%      { opacity: 1; transform: scale(1) rotate(90deg); }
}

.apbp-gift-toast .apbp-gift-toast-close {
    position: absolute;
    top: 6px;
    right: 6px;
    width: auto;
    min-width: 0;
    min-height: 0;
    margin: 0;
    padding: 4px 9px;
    border: 0;
    border-radius: 4px;
    background: transparent !important;
    box-shadow: none;
    color: #8a5f2c !important;
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
}

.apbp-gift-toast .apbp-gift-toast-close:hover,
.apbp-gift-toast .apbp-gift-toast-close:focus-visible {
    background: rgba(138, 95, 44, .12) !important;
}

/* Phones: the width of the screen, at the chosen distance from the bottom or the top. */
@media (max-width: 600px) {
    .apbp-gift-toast[class*="is-"] {
        --apbp-toast-cx: 0;
        right: 12px;
        left: 12px;
        width: auto;
        max-width: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .apbp-gift-toast { transition: none; }

    .apbp-gift-toast.is-visible .apbp-gift-toast-icon .apbp-gift-icon,
    .apbp-gift-toast.is-visible .apbp-gift-toast-icon::before,
    .apbp-gift-toast.is-visible .apbp-gift-toast-icon::after {
        animation: none;
    }
}

/* A gift line: "OFERTA" before the name, and what it would have cost. */
.apbp-gift-tag {
    display: inline-block;
    margin-right: 6px;
    padding: 2px 7px;
    border-radius: 3px;
    background: #0d404f;
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    line-height: 16px;
    letter-spacing: .02em;
    text-transform: uppercase;
    vertical-align: middle;
    white-space: nowrap;
}

.apbp-gift-was {
    margin-right: 6px;
    opacity: .6;
}