/* ============================================================
   DIVALVS — GLOBAL DESIGN SYSTEM
   ------------------------------------------------------------
   Single source of truth for shared visual rules.

   IMPORTANT:
   - Shared visual values belong here, not inside individual pages.
   - Page CSS should reference these variables when it needs a
     component-specific rule.
   - Unique component/layout behaviour may remain page-specific.
   ============================================================ */

:root{
    /* Typography */
    --divalvs-font-family:system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;

    --divalvs-font-size-3xs:10px;
    --divalvs-font-size-2xs:11px;
    --divalvs-font-size-xs:.75rem;
    --divalvs-font-size-sm:.875rem;
    --divalvs-font-size-base:1rem;
    --divalvs-font-size-xl:1.25rem;
    --divalvs-font-size-2xl:1.5rem;
    --divalvs-font-size-3xl:1.875rem;
    --divalvs-font-size-5xl:3rem;
    --divalvs-font-size-7xl:4.5rem;

    --divalvs-line-height-xs:1rem;
    --divalvs-line-height-sm:1.25rem;
    --divalvs-line-height-base:1.5rem;
    --divalvs-line-height-xl:1.75rem;
    --divalvs-line-height-2xl:2rem;
    --divalvs-line-height-3xl:2.25rem;

    --divalvs-tracking-wide:.025em;
    --divalvs-tracking-wider:.05em;
    --divalvs-tracking-widest:.1em;
    --divalvs-tracking-kicker:.35em;
    --divalvs-tracking-eyebrow:.4em;

    /* Global page-name header
       --------------------------------------------------------
       One rule for page titles such as LOJA, CARRINHO,
       CHECKOUT and MINHA CONTA. Page templates must use the
       shared .divalvs-page-header / .divalvs-page-title classes.
    */
    --divalvs-page-header-height:44px;
    /* Global top-row geometry: page shells start at 30px, while the
       Back / Page Name / Language row sits at 5px. The -25px shift is
       therefore shared by every page instead of being page-specific. */
    --divalvs-page-shell-top:30px;
    --divalvs-page-control-row-top:5px;
    --divalvs-page-header-top:-25px;
    --divalvs-page-title-size:14px;
    --divalvs-page-title-line-height:20px;
    --divalvs-page-title-weight:400;
    --divalvs-page-title-letter-spacing:.35em;
    --divalvs-page-title-color:rgba(255,255,255,.70);

    /* Global main-page content width.
       LOJA, CARRINHO, CHECKOUT, MINHA CONTA and PRIVACIDADE
       share one maximum width. Page files must not invent a different
       shell width. */
    --divalvs-page-content-max:900px;

    /* Optional second row inside a page header (e.g. account greeting). */
    --divalvs-page-header-with-subtitle-height:64px;
    --divalvs-page-subtitle-top:21px;
    --divalvs-page-subtitle-size:12px;
    --divalvs-page-subtitle-line-height:16px;
    --divalvs-page-subtitle-weight:500;
    --divalvs-page-subtitle-letter-spacing:0;
    --divalvs-page-subtitle-color:rgba(255,255,255,.90);

    /* Global back-navigation control — one geometry for every page. */
    --divalvs-page-back-size:44px;
    --divalvs-page-back-glyph-size:17px;
    --divalvs-page-back-stroke:2px;
    --divalvs-page-back-color:#fff;

    /* Global corner geometry
       --------------------------------------------------------
       ONE rounded-corner rule for the whole website.
       The approved icon-button corner is the source of truth;
       every tile/card follows that exact same curve.
    */
    --divalvs-radius-icon-button:12px;
    --divalvs-radius-tile:var(--divalvs-radius-icon-button);

    /* Compatibility aliases: page code must resolve back to the
       same global value instead of inventing page-specific radii. */
    --divalvs-radius-product-tile:var(--divalvs-radius-tile);
    --divalvs-radius-framed-tile:var(--divalvs-radius-tile);
    --divalvs-tile-frame-inset:12px;

    /* Shared tile treatment — approved Produtos shadow. */
    --divalvs-shadow-tile:
        12px 12px 30px rgba(0,0,0,.40),
        -6px -6px 20px rgba(255,255,255,.05);

    /* Secondary / nested tile treatment
       --------------------------------------------------------
       One shared rule for the coloured tiles that sit INSIDE a
       primary PREP/glass shell. The My Account dashboard tiles
       are the visual source of truth. Edit Account INFO/PASSWORD
       and any future nested tiles use this same semantic class. */
    --divalvs-secondary-tile-bg:#75787d;
    --divalvs-secondary-tile-color:#fff;
    --divalvs-secondary-tile-muted:rgba(255,255,255,.72);
    --divalvs-secondary-tile-border:rgba(255,255,255,.08);
    /* One shared spacing system for nested/secondary UI.
       MY ACCOUNT dashboard is the source of truth. */
    --divalvs-secondary-tile-gap:8px;   /* secondary tile <-> secondary tile */
    --divalvs-secondary-inner-gap:8px;  /* inner control/field <-> control/field */

    /* Global secondary-tile geometry. MY ACCOUNT is the source of truth. */
    --divalvs-secondary-tile-padding-y:14px;
    --divalvs-secondary-tile-padding-x:16px;

    /* Global header INSIDE a secondary tile. */
    --divalvs-secondary-title-gap:3px;  /* header -> first content row */
    --divalvs-secondary-title-size:14px;
    --divalvs-secondary-title-weight:700;
    --divalvs-secondary-title-line-height:1.2;
    --divalvs-secondary-title-letter-spacing:.08em;
}

html{
    font-family:var(--divalvs-font-family);
    font-size:16px;
}

body,
button,
input,
select,
textarea{
    font-family:var(--divalvs-font-family)!important;
}

/*
 * Global page-content width.
 *
 * Every principal page shell uses this single rule. The page-specific
 * styles may control vertical spacing and internal layout, but not a
 * different maximum width.
 */
html body .divalvs-products-content-shell,
html body .divalvs-cart-shell,
html body .dv-checkout-shell,
html body .divalvs-account-shell,
html body .divalvs-privacy-shell{
    width:100%!important;
    max-width:var(--divalvs-page-content-max)!important;
    margin-left:auto!important;
    margin-right:auto!important;
    box-sizing:border-box!important;
}

/*
 * Universal DIVALVS tile treatment.
 *
 * This is intentionally site-wide. The selectors below cover the
 * shared tile shells used by Home, Produtos, Carrinho, Checkout and
 * A Minha Conta. Page templates must not define a different outer
 * corner radius for these components.
 */
html body .neo-box,
html body .divalvs-global-tile,
html body .divalvs-product-main-tile,
html body .divalvs-product-category-tile,
html body .divalvs-product-card,
html body .divalvs-cart-card,
html body .dv-checkout-card,
html body .divalvs-account-card,
html body .divalvs-account-tile,
html body .divalvs-auth-card,
html body .divalvs-social-auth,
html body .divalvs-address-sync-card,
html body.divalvs-addresses-page .woocommerce-Address{
    border-radius:var(--divalvs-radius-tile)!important;
    box-shadow:var(--divalvs-shadow-tile)!important;
}

/*
 * Any visual layer that fills a global tile MUST inherit the shell
 * corner. This is the part that prevents the pale/glass layer from
 * sticking out around media with a different radius.
 */
html body .neo-box > .prep-bg,
html body .divalvs-global-tile > .prep-bg,
html body .divalvs-product-category-tile > .divalvs-product-category-bg,
html body .divalvs-product-main-tile > .divalvs-product-main-tile-bg,
html body .divalvs-account-card > .divalvs-account-main-tile-bg,
html body .divalvs-product-card > video,
html body .divalvs-product-card > .divalvs-tile-video,
html body .divalvs-product-card > .absolute.inset-0{
    border-radius:inherit!important;
}

/* Media/product tiles clip their own visual layer to the exact same
   global curve. This removes corner bleed on every page/state. */
html body .divalvs-product-card,
html body .divalvs-product-category-tile,
html body .divalvs-product-main-tile,
html body .divalvs-cart-card,
html body .dv-checkout-card,
html body .divalvs-account-card,
html body .neo-box{
    overflow:hidden!important;
    isolation:isolate!important;
}

/* Shared framed shells keep the existing 12px content inset, but the
   corner itself is NEVER calculated independently from the global rule. */
html body .divalvs-product-category-tile,
html body .divalvs-product-main-tile{
    padding:var(--divalvs-tile-frame-inset)!important;
}


/* ============================================================
   GLOBAL SECONDARY / NESTED TILE
   ------------------------------------------------------------
   Used inside the primary glass/PREP shell. This deliberately
   matches the approved My Account dashboard tiles.
   ============================================================ */
html body .divalvs-secondary-tile,
html body .divalvs-account-tile{
    border:1px solid var(--divalvs-secondary-tile-border)!important;
    border-radius:var(--divalvs-radius-tile)!important;
    background:var(--divalvs-secondary-tile-bg)!important;
    color:var(--divalvs-secondary-tile-color)!important;
    box-shadow:none!important;
}

html body .divalvs-secondary-tile:hover,
html body .divalvs-secondary-tile:focus,
html body .divalvs-secondary-tile:active,
html body .divalvs-account-tile:hover,
html body .divalvs-account-tile:focus,
html body .divalvs-account-tile:active{
    background:var(--divalvs-secondary-tile-bg)!important;
    color:var(--divalvs-secondary-tile-color)!important;
    box-shadow:none!important;
    transform:none!important;
}

/* One global spacing rule for every vertical stack of secondary tiles.
   MY ACCOUNT dashboard is the reference and Edit Account follows it. */
html body .divalvs-account-grid,
html body .woocommerce-EditAccountForm.divalvs-edit-account-split-form,
html body .divalvs-secondary-tile-stack{
    gap:var(--divalvs-secondary-tile-gap)!important;
}

/* One GLOBAL header rule for text INSIDE secondary tiles.
   PEDIDOS / MORADAS / DADOS DA CONTA / INFO / PASSWORD
   all use exactly the same type, left alignment and content spacing. */
html body .divalvs-secondary-tile-title,
html body .divalvs-account-tile-title,
html body .divalvs-edit-account-section-title{
    display:block!important;
    margin:0 0 var(--divalvs-secondary-title-gap)!important;
    padding:0!important;
    color:var(--divalvs-secondary-tile-color)!important;
    font-family:var(--divalvs-font-family)!important;
    font-size:var(--divalvs-secondary-title-size)!important;
    font-weight:var(--divalvs-secondary-title-weight)!important;
    line-height:var(--divalvs-secondary-title-line-height)!important;
    letter-spacing:var(--divalvs-secondary-title-letter-spacing)!important;
    text-align:left!important;
    text-transform:uppercase!important;
}

/* Secondary stacks never gain page-specific margins between tiles. */
html body .divalvs-account-grid > .divalvs-secondary-tile,
html body .woocommerce-EditAccountForm.divalvs-edit-account-split-form > .divalvs-secondary-tile,
html body .divalvs-secondary-tile-stack > .divalvs-secondary-tile{
    margin-top:0!important;
    margin-bottom:0!important;
}


/* ============================================================
   GLOBAL PAGE-NAME HEADER
   ------------------------------------------------------------
   Shared position + typography for every page-name header.
   Examples: LOJA / CARRINHO / CHECKOUT / MINHA CONTA.
   ============================================================ */
html body .divalvs-page-header{
    position:relative!important;
    display:block!important;
    width:100%!important;
    height:var(--divalvs-page-header-height)!important;
    min-height:var(--divalvs-page-header-height)!important;
    margin:0 0 12px!important;
    padding:0!important;
}

/* Page headers that need a centered second row share one global geometry. */
html body.divalvs-my-account .divalvs-page-header.divalvs-page-header--with-subtitle{
    height:var(--divalvs-page-header-with-subtitle-height)!important;
    min-height:var(--divalvs-page-header-with-subtitle-height)!important;
    margin-bottom:12px!important;
}

html body .divalvs-page-header--with-subtitle > .divalvs-page-subtitle{
    position:absolute!important;
    top:var(--divalvs-page-subtitle-top)!important;
    left:50%!important;

    display:block!important;
    width:auto!important;
    max-width:calc(100% - 120px)!important;

    margin:0!important;
    padding:0!important;

    color:var(--divalvs-page-subtitle-color)!important;
    font-family:var(--divalvs-font-family)!important;
    font-size:var(--divalvs-page-subtitle-size)!important;
    font-weight:var(--divalvs-page-subtitle-weight)!important;
    line-height:var(--divalvs-page-subtitle-line-height)!important;
    letter-spacing:var(--divalvs-page-subtitle-letter-spacing)!important;
    text-align:center!important;
    text-transform:none!important;
    white-space:nowrap!important;

    transform:translateX(-50%)!important;
    pointer-events:none!important;
    z-index:101!important;
}

html body .divalvs-page-title{
    position:absolute!important;
    top:var(--divalvs-page-header-top)!important;
    left:50%!important;

    display:flex!important;
    align-items:center!important;
    justify-content:center!important;

    width:auto!important;
    height:var(--divalvs-page-header-height)!important;

    margin:0!important;
    padding:0!important;

    color:var(--divalvs-page-title-color)!important;
    font-family:var(--divalvs-font-family)!important;
    font-size:var(--divalvs-page-title-size)!important;
    font-weight:var(--divalvs-page-title-weight)!important;
    line-height:var(--divalvs-page-title-line-height)!important;
    letter-spacing:var(--divalvs-page-title-letter-spacing)!important;
    text-align:center!important;
    text-transform:uppercase!important;
    white-space:nowrap!important;

    transform:translateX(-50%)!important;
    pointer-events:none!important;
}

/* ============================================================
   GLOBAL BACK NAVIGATION — ALL PAGES
   ------------------------------------------------------------
   One control for LOJA, CARRINHO, CHECKOUT and MINHA CONTA.
   Page-specific styles must not reposition or animate this arrow.
   ============================================================ */
html body .divalvs-page-header > a.divalvs-page-back{
    position:absolute!important;
    top:var(--divalvs-page-header-top)!important;
    left:0!important;
    right:auto!important;
    bottom:auto!important;

    display:flex!important;
    align-items:center!important;
    justify-content:center!important;

    width:var(--divalvs-page-back-size)!important;
    min-width:var(--divalvs-page-back-size)!important;
    max-width:var(--divalvs-page-back-size)!important;
    height:var(--divalvs-page-back-size)!important;
    min-height:var(--divalvs-page-back-size)!important;
    max-height:var(--divalvs-page-back-size)!important;

    margin:0!important;
    padding:0!important;

    border:0!important;
    border-radius:0!important;
    outline:0!important;

    background:transparent!important;
    color:var(--divalvs-page-back-color)!important;
    box-shadow:none!important;

    font-size:0!important;
    line-height:0!important;
    text-decoration:none!important;

    transform:none!important;
    translate:none!important;
    scale:none!important;
    rotate:none!important;
    transition:none!important;
    animation:none!important;

    pointer-events:auto!important;
    -webkit-tap-highlight-color:transparent!important;
}

html body .divalvs-page-header > a.divalvs-page-back::before{
    content:""!important;
    display:block!important;

    width:var(--divalvs-page-back-glyph-size)!important;
    min-width:var(--divalvs-page-back-glyph-size)!important;
    max-width:var(--divalvs-page-back-glyph-size)!important;
    height:var(--divalvs-page-back-glyph-size)!important;
    min-height:var(--divalvs-page-back-glyph-size)!important;
    max-height:var(--divalvs-page-back-glyph-size)!important;

    margin:0!important;
    padding:0!important;

    border:0!important;
    border-left:var(--divalvs-page-back-stroke) solid var(--divalvs-page-back-color)!important;
    border-bottom:var(--divalvs-page-back-stroke) solid var(--divalvs-page-back-color)!important;

    background:transparent!important;
    box-shadow:none!important;

    transform:rotate(45deg)!important;
    translate:none!important;
    scale:none!important;
    transition:none!important;
    animation:none!important;
}

html body .divalvs-page-header > a.divalvs-page-back:hover,
html body .divalvs-page-header > a.divalvs-page-back:focus,
html body .divalvs-page-header > a.divalvs-page-back:focus-visible,
html body .divalvs-page-header > a.divalvs-page-back:active{
    top:var(--divalvs-page-header-top)!important;
    left:0!important;
    margin:0!important;
    padding:0!important;
    background:transparent!important;
    color:var(--divalvs-page-back-color)!important;
    box-shadow:none!important;
    outline:0!important;
    transform:none!important;
    translate:none!important;
    scale:none!important;
    rotate:none!important;
    transition:none!important;
    animation:none!important;
}

html body .divalvs-page-header > a.divalvs-page-back:hover::before,
html body .divalvs-page-header > a.divalvs-page-back:focus::before,
html body .divalvs-page-header > a.divalvs-page-back:focus-visible::before,
html body .divalvs-page-header > a.divalvs-page-back:active::before{
    transform:rotate(45deg)!important;
    translate:none!important;
    scale:none!important;
    transition:none!important;
    animation:none!important;
}

/* ============================================================
   GLOBAL ROUNDED-CORNER SYSTEM — ALL PAGES
   ------------------------------------------------------------
   Tiles/cards use the EXACT same 12px curve as icon buttons.
   Keep this centralized: page templates must not invent larger
   tile radii. Inputs/pills/circular controls are intentionally
   excluded because they are controls, not tiles.
   ============================================================ */

/* Inner tiles/cards also use the same curve, without changing their existing shadows. */
html body .divalvs-subtile,
html body .divalvs-cart-inner table.shop_table tr.cart_item,
html body .divalvs-cart-inner .cart_totals,
html body .divalvs-cart-inner .woocommerce-message,
html body .dv-address-summary,
html body .dv-address-card,
html body .dv-address-fallback,
html body:not(.divalvs-checkout-saved-address) .dv-checkout-inner .woocommerce-billing-fields,
html body:not(.divalvs-checkout-saved-address) .dv-checkout-inner .woocommerce-shipping-fields,
html body .dv-checkout-inner #payment ul.payment_methods li{
    border-radius:var(--divalvs-radius-tile)!important;
}

/* Icon buttons use the same global source-of-truth value. */
html body .divalvs-products-external-actions .divalvs-linked-style-btn,
html body .divalvs-products-external-actions .divalvs-cutout-icon-btn,
html body .divalvs-product-card .divalvs-cart-button.divalvs-cutout-icon-btn,
html body .divalvs-account-icon-btn,
html body .divalvs-register-submit-icon,
html body .divalvs-register-submit-icon::before,
html body .divalvs-login-submit-icon,
html body .divalvs-login-submit-icon::before{
    border-radius:var(--divalvs-radius-icon-button)!important;
}

/* Checkout order review is one visual tile split into a header + body. */
html body .dv-checkout-inner #order_review_heading{
    border-radius:var(--divalvs-radius-tile) var(--divalvs-radius-tile) 0 0!important;
}
html body .dv-checkout-inner #order_review{
    border-radius:0 0 var(--divalvs-radius-tile) var(--divalvs-radius-tile)!important;
}

/* Every tile-filling visual layer follows its parent's exact curve. */
html body .divalvs-global-tile > img,
html body .divalvs-global-tile > video,
html body .divalvs-global-tile > .prep-bg,
html body .divalvs-product-main-tile > .divalvs-product-main-tile-bg,
html body .divalvs-product-category-tile > .divalvs-product-category-bg{
    border-radius:inherit!important;
}


/* ============================================================
   GLOBAL SECONDARY TILE — WOOCOMMERCE ORDER CARDS
   ------------------------------------------------------------
   PEDIDOS order cards are secondary/nested tiles and therefore
   MUST use the same global secondary-tile surface as the rest of
   the website. Produtos remains independent and is not targeted.
   ============================================================ */
html body.divalvs-orders-page
.divalvs-endpoint-content
.woocommerce-orders-table tbody{
    gap:var(--divalvs-secondary-tile-gap)!important;
}

html body.divalvs-orders-page
.divalvs-endpoint-content
.woocommerce-orders-table tbody tr{
    border:1px solid var(--divalvs-secondary-tile-border)!important;
    border-radius:var(--divalvs-radius-tile)!important;
    background:var(--divalvs-secondary-tile-bg)!important;
    color:var(--divalvs-secondary-tile-color)!important;
    box-shadow:none!important;
}

html body.divalvs-orders-page
.divalvs-endpoint-content
.woocommerce-orders-table tbody td,
html body.divalvs-orders-page
.divalvs-endpoint-content
.woocommerce-orders-table tbody td:first-child,
html body.divalvs-orders-page
.divalvs-endpoint-content
.woocommerce-orders-table tbody td:last-child{
    border-color:var(--divalvs-secondary-tile-border)!important;
    background:transparent!important;
    color:var(--divalvs-secondary-tile-color)!important;
}

html body.divalvs-orders-page
.divalvs-endpoint-content
.woocommerce-orders-table tbody td::before{
    color:var(--divalvs-secondary-tile-muted)!important;
}

html body.divalvs-orders-page
.woocommerce-orders-table__cell-order-number,
html body.divalvs-orders-page
.woocommerce-orders-table__cell-order-date,
html body.divalvs-orders-page
.woocommerce-orders-table__cell-order-status,
html body.divalvs-orders-page
.woocommerce-orders-table__cell-order-total,
html body.divalvs-orders-page
.woocommerce-orders-table__cell-order-actions,
html body.divalvs-orders-page
.woocommerce-orders-table__cell-order-number a,
html body.divalvs-orders-page
.woocommerce-orders-table__cell-order-total .woocommerce-Price-amount,
html body.divalvs-orders-page
.woocommerce-orders-table__cell-order-total .woocommerce-Price-currencySymbol{
    background:transparent!important;
    color:var(--divalvs-secondary-tile-color)!important;
}

/* ============================================================
   GLOBAL SITE FOOTER
   Cached with the design system instead of being printed inline
   into every page response.
   ============================================================ */
html{
    min-height:100%!important;
}

body{
    position:relative!important;
    min-height:100vh!important;
    min-height:100dvh!important;
    box-sizing:border-box!important;
    padding-bottom:72px!important;
}

.divalvs-global-footer{
    position:absolute!important;
    left:50%!important;
    bottom:16px!important;
    z-index:80!important;
    display:flex!important;
    flex-direction:column!important;
    align-items:center!important;
    justify-content:center!important;
    gap:2px!important;
    width:min(var(--divalvs-page-content-max),calc(100% - 32px))!important;
    box-sizing:border-box!important;
    margin:0!important;
    padding:0!important;
    color:rgba(255,255,255,.76)!important;
    font-family:var(--divalvs-font-family)!important;
    font-size:9px!important;
    font-weight:600!important;
    line-height:1.35!important;
    letter-spacing:.10em!important;
    text-align:center!important;
    text-shadow:0 1px 2px rgba(0,0,0,.18)!important;
    transform:translateX(-50%)!important;
    pointer-events:none!important;
}

.divalvs-global-footer__line{
    display:block!important;
    width:100%!important;
    margin:0!important;
    padding:0!important;
    color:inherit!important;
    font:inherit!important;
    line-height:inherit!important;
    text-align:center!important;
    white-space:normal!important;
}

@media(max-width:680px){
    body{
        padding-bottom:68px!important;
    }

    .divalvs-global-footer{
        bottom:14px!important;
        width:calc(100% - 28px)!important;
        font-size:8px!important;
        line-height:1.35!important;
    }
}