Brinco de Trevo (Prata 925)

/* ===== Estrutura geral ===== */ .cart-items-component { width: 100%; height: 100%; display: flex; flex-direction: column; } .cart-drawer__dialog { overflow: hidden; } .cart-drawer__inner { height: 100%; overflow: hidden; } .cart-drawer__content { height: 100%; display: flex; flex-direction: column; } /* (antes: calc(100% - var(--header-height))) */ /* ===== Layout 2 colunas ===== */ .cart-drawer__layout { display: flex; height: 100%; gap: 1.6rem; } /* Coluna de Recomendados — ocupa altura inteira e rola independente */ .cart-drawer__recommendations-column { flex: 0 0 20rem; max-width: 20rem; height: 100%; padding: var(--cart-drawer-padding); border-right: 1px solid rgba(0, 0, 0, 0.06); display: flex; flex-direction: column; overflow-y: auto; overflow-x: hidden; background-color: #f5f5f5; padding-block-start: 35px; padding-block-end: 35px; } /* Coluna do Carrinho — grid: Header | Itens (rolam) | Resumo */ .cart-drawer__cart-column { flex: 1; min-width: 0; display: grid; grid-template-rows: auto 1fr auto; /* <<< divide em 3 faixas */ } /* Header agora vale só para a coluna de produtos */ .cart-drawer__header { background-color: var(--color-background); display: flex; align-items: center; justify-content: space-between; width: 100%; padding: var(--cart-drawer-padding); border-bottom: var(--style-border-width) solid none; position: sticky; top: 0; z-index: 1; /* gruda no topo da coluna */ } @media (min-width: 750px) { .cart-drawer__header { padding: var(--cart-drawer-padding-desktop); } } /* A área de itens passa a ser o container rolável da coluna */ .cart-drawer__items { overflow: auto; } /* Resumo fixo no rodapé da coluna (não precisa sticky, pois quem rola é .cart-drawer__items) */ .cart-drawer__summary { background-color: var(--color-background); } /* ===== Responsivo: mobile empilha ===== */ @media (max-width: 749px) { .cart-drawer__layout { flex-direction: column; gap: 0; } .cart-drawer__recommendations-column { flex: 0 0 auto; width: 100%; max-width: none; border-right: none; border-top: 1px solid rgba(0,0,0,0.06); max-height: none; height: auto; padding-bottom: .5rem; } } /* ===== Lista de recomendações ===== */ .cart-drawer__recommendations-title { font-size: 13px; text-transform: uppercase; letter-spacing: 1px; margin-bottom: 0.75rem; line-height: 1.23077; font-weight: 600; } /* Desktop: coluna com scroll */ .cart-drawer__recommendations-list { display: flex; flex-direction: column; gap: 0.75rem; } /* Mobile: slider horizontal */ @media (max-width: 749px) { .cart-drawer__recommendations-list { display: grid; grid-auto-flow: column; grid-auto-columns: 85%; gap: .75rem; overflow-x: auto; overflow-y: hidden; padding-bottom: .25rem; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; } .cart-drawer__recommendations-list::-webkit-scrollbar { height: 0; } .reco-slide { scroll-snap-align: start; } } .cart-drawer__recommendation { display: grid; grid-template-rows: auto 1fr auto; gap: 0.4rem; width: 100%; } .cart-drawer__recommendation-main { display: flex; width: 100%; text-align: left; border: none; background: transparent; padding: 0.5rem 0; cursor: pointer; gap: 0.75rem; align-items: center; } .cart-drawer__recommendation-main:hover, .cart-drawer__recommendation-main:focus-visible { outline: none; opacity: 0.9; } .cart-drawer__recommendation-image-wrapper { flex-shrink: 0; width:74px; height: 74px; border-radius: var(--style-border-radius, 8px); overflow: hidden; } .cart-drawer__recommendation-image { width: 100%; height: 100%; object-fit: cover; display: block; } .cart-drawer__recommendation-info { display: flex; flex-direction: column; gap: 0.35rem; min-width: 0; } /* Título até 2 linhas (clamp) + equalização via JS */ .cart-drawer__recommendation-title { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: var(--reco-title-height, auto); font-size: 14px; font-family: var(--cart-primary-font-family);line-height: 1.3;color:#000 !important; } /* Preço + comparativo com placeholder para alinhar CTA */ .cart-drawer__pricewrap { display: flex; align-items: baseline; gap: .5rem; line-height: 1.3;color:var(--color-foreground);font-weight: var(--font-weight); min-height: calc(1.3em * 2); /* reserva “duas linhas” para todos os cards */ } .cart-drawer__recommendation-price { font-size: var(--font-size-small, 0.95rem); font-family: var(--cart-primary-font-family);font-weight: var(--font-accent--weight); } .cart-drawer__recommendation-compare { font-size: var(--font-size-small, 0.85rem); text-decoration: line-through; opacity: .6;font-family: var(--cart-primary-font-family); } .cart-drawer__recommendation-compare.is-placeholder { visibility: hidden; } /* ocupa espaço, não aparece */ /* CTA */ .cart-drawer__recommendation-cta { display: inline-flex; align-items: center; justify-content: center; font-size: 14px; padding: 0.4rem 0.95rem; border-radius: var(--recomendaraio); border: var(--style-border-width, 1px) solid #c7c7c7b3; background: #ffff; color: var(--color-foreground); text-decoration: none; cursor: pointer; font-family: var(--cart-primary-font-family); line-height: 1; place-self: center; } .cart-drawer__recommendation-cta:hover { opacity: .95; transform: scale(1.1) } .cart-drawer__recommendations-empty { font-size: var(--font-size-small, 0.85rem); opacity: 0.7; } /* Nav (setas + dots) apenas no mobile */ .hidden-desktop { display: none; } @media (max-width: 749px) { .hidden-desktop { display: flex; justify-content: center; align-items: center; gap: .75rem; margin-top: .25rem; } .reco-slider-nav { position: relative; } .reco-arrow { width: 25px; height: 25px; border-radius: 999px; background: #000; color: #fff; border: none; display: inline-flex; align-items: center; justify-content: center; } .reco-arrow svg { width: 18px; height: 18px; } .reco-dots { display: inline-flex; gap: 6px; } .reco-dot { width: 8px; height: 8px; border-radius: 999px; background: rgba(0,0,0,.25); border: none; } .reco-dot.is-active { background: rgba(0,0,0,.7); } } /* (opcional) largura do drawer no desktop */ @media (min-width: 990px) { .cart-drawer__dialog.dialog-drawer { max-width: none !important; inline-size: min(780px, calc(60vw - 48px)) !important; } } @media (min-width: 990px) { .cart-drawer__dialog.dialog-drawer:has(.cart-drawer__recommendations-column) { max-width: none !important; inline-size: min(780px, calc(60vw - 48px)) !important; } .cart-drawer__dialog.dialog-drawer:not(:has(.cart-drawer__recommendations-column)) { max-width: none !important; inline-size: min(460px, calc(60vw - 48px)) !important; } } h3.cart-drawer__recommendations-title { text-align: center; } .cart-drawer__recommendation-cta { transform: scale(1); transform-origin: center; transition: transform 200ms cubic-bezier(.2,.8,.2,1), opacity 200ms ease; will-change: transform, opacity; /* opcional */ backface-visibility: hidden; font-weight: 600; /* ajuda a evitar tremidos */ } .cart-drawer__recommendation-cta:hover { opacity: .95; transform: scale(1.06); /* 1.10 é mais brusco */ } .cart-drawer__recommendation-cta:active { transform: scale(.99); /* feedback no clique */ } /* Acessibilidade */ @media (prefers-reduced-motion: reduce) { .cart-drawer__recommendation-cta { transition: none; } } button.continuarcomprando { width: 100%; height: clamp(25px, var(--height-buy-buttons), 55px); --text-align: center; display: grid; align-content: center; text-decoration: none; text-align: var(--text-align); color: var(--color-primary-button-background); -webkit-appearance: none; appearance: none; border: 2px solid var(--color-primary-button-background) !important; background-color: var(--color-background); border-radius: var(--recomendaraio1); font-family: var(--font-paragraph--family); font-style: var(--font-paragraph--style); font-size: 15px; line-height: var(--font-paragraph--line-height); margin-block: 0; transition: color var(--animation-speed) var(--animation-easing), box-shadow var(--animation-speed) var(--animation-easing), background-color var(--animation-speed) var(--animation-easing); cursor: pointer; margin-top: -20px; padding-block: var(--button-padding-block); padding-inline: var(--button-padding-inline); letter-spacing: 0px; } @media screen and (max-width: 900px) { button.continuarcomprando { margin-top: 0px; } } /* Quick Add (recomendações no drawer) */ .reco-quickadd[hidden]{ display:none !important; } .reco-quickadd{ position:fixed; inset:0; z-index:9999; display:grid; place-items:center; } .reco-quickadd__backdrop{ position:absolute; inset:0; background:rgba(0,0,0,.45); } .reco-quickadd__panel{ position:relative; width:min(560px, 92vw); max-height:85vh; overflow:auto; background:var(--color-background, #fff); color:var(--color-foreground, #111); border-radius:12px; box-shadow:0 10px 30px rgba(0,0,0,.25); padding:30px; } .reco-quickadd__close{ position:absolute; top:8px; right:8px; border:none; background:transparent; font-size:35px; line-height:1; cursor:pointer;color:#000 !important; } .reco-quickadd__head{ display:flex; gap:12px; align-items:center; margin-bottom:12px; } .reco-quickadd__thumb img{ width:120px; height:auto; object-fit:cover; border-radius:8px; display:block; } .reco-quickadd__title{ font-weight:600; font-size:1rem; line-height:1.3; } .reco-quickadd__options{ display:grid; gap:10px; margin:12px 0; } .reco-quickadd__options label{ display:block; font-size:.85rem; margin-bottom:6px; opacity:.9; } .reco-quickadd__options select{ width:100%; border:1px solid rgba(0,0,0,.15); border-radius:8px; padding:.6rem .7rem; background:#fff; } .reco-quickadd__qty{ display:flex; align-items:center; gap:10px; margin:8px 0 14px; } .reco-quickadd__qty input{ width:90px; border:1px solid rgba(0,0,0,.15); border-radius:8px; padding:.45rem .6rem; } .reco-quickadd__status{ min-height:1.2em; font-size:.9rem; opacity:.9; margin-bottom:10px; } .reco-quickadd__submit{ width:100%; padding:.9rem 1rem; border-radius:10px; border:none; background:var(--fundoadd); color:var(--fonteadd); font-weight:600; cursor:pointer; transition:.2s; } .reco-quickadd__submit[disabled]{ opacity:.5; cursor:not-allowed; } .reco-quickadd__submit:hover:not([disabled]){ filter:brightness(1.05); transform:translateY(-1px); } /* Título do QA vira "coluna" para o preço ficar logo abaixo */ .reco-quickadd__head { align-items: flex-start; } .reco-quickadd__title { display: flex; flex-direction: column; gap: 10px; font-size: 1.05rem; /* leve aumento no título */ } /* Linha de preço sob o título */ .qa-price-line { font-size: 1.05rem; line-height: 1.2; font-weight: 700; } .qa-price-line .qa-price__compare { font-weight: 500; text-decoration: line-through; opacity: .7; font-size: .9em; /* um pouco menor que o preço atual */ margin-left: .4rem; } /* Selects das opções: fonte maior */ .reco-quickadd__options select { font-size: 1rem; /* ↑ */ padding: .7rem .8rem; /* um pouco mais alto/largo */ } /* Botão Adicionar ao carrinho: fonte maior */ .reco-quickadd__submit { font-size: 1.05rem; /* ↑ */ padding: 1rem 1.15rem; /* ↑ */ } @media (max-width: 767px) { .cart-drawer__recommendation-title { font-size: 13px; } } @media (max-width: 767px) { .cart-drawer__recommendation-price { font-size: 13px; } } @media (max-width: 767px) { .cart-drawer__recommendation-compare { font-size: 13px; } } @media (min-width: 767px) { aside.cart-drawer__recommendations-column.mobile { display: none; } button.cart-drawer__recommendation-cta { margin-top: -20px; } } @media (max-width: 767px) { aside.cart-drawer__recommendations-column.desktop{ display:none; } aside.cart-drawer__recommendations-column.mobile { padding: 10px 20px; margin-top: 16px; } button.cart-drawer__recommendation-cta { margin-top: 0px; margin-left: 0px; } td.cart-items__quantity { margin-top: 2px; height: 30px; } .quantity-selector :is(.quantity-minus,.quantity-plus) { height: 30px !important; width: 30px !important; } .quantity-selector input[type=number] { font-size: 14px !important; } } @media (max-width: 767px){ /* transforma o card em 2 colunas: imagem | texto */ .cart-drawer__recommendation{ display: grid; grid-template-columns: 74px 1fr; column-gap: .75rem; row-gap: .35rem; align-items: start; margin-top: 15px; margin-bottom: 10px; } /* o botão "main" passa a ser um grid "plano" (não layouta, só repassa os filhos) */ .cart-drawer__recommendation-main{ display: contents; } /* imagem fica na coluna 1 e ocupa 2 linhas (título+preço) */ .cart-drawer__recommendation-image-wrapper{ grid-column: 1; grid-row: 1 / span 3; /* título, preço, botão */ } /* infos (título + preço) ficam na coluna 2 */ .cart-drawer__recommendation-info{ grid-column: 2; grid-row: 1 / span 2; min-width: 0; } /* CTA também vai para a coluna 2, logo abaixo do preço */ .cart-drawer__recommendation-cta{ grid-column: 2; grid-row: 3; width: 100%; margin: .25rem 0 0 0; place-self: start; } /* remove suas gambiarras específicas de mobile */ button.cart-drawer__recommendation-cta{ margin-top: -20px !important; margin-left: 0 !important; } } @media (max-width: 749px){ /* quem rola é isso aqui: então o "espaço" tem que ser padding, não margin */ .cart-drawer__items{ padding-bottom: 260px; /* ajuste fino se quiser */ } }