/* ==========================================================================
   WOW24 — gift card page, design B · Vitrina.
   Markup: resources/views/frontend/pages/b/gift-card.blade.php
   Tokens: site-designs.css. Left: a typographic card that follows the amount; right: the form.
   ========================================================================== */
html[data-pdp-design="b"] .gc-section{ width:100%; align-self:stretch; margin:0 !important; padding:0 !important; background:var(--paper); }
html[data-pdp-design="b"] .gc-page{
    --gc-field:#8c9095; --gc-err:#b3261e;
    width:100%; max-width:1280px; margin:0 auto; padding:0 var(--x6) 120px; box-sizing:border-box;
    font-family:'Jost',sans-serif; font-size:15px; line-height:1.55; color:var(--ink); -webkit-font-smoothing:antialiased;
}
html[data-pdp-design="b"] .gc-page *,
html[data-pdp-design="b"] .gc-page *::before,
html[data-pdp-design="b"] .gc-page *::after{ box-sizing:border-box; border-radius:0 !important; }
html[data-pdp-design="b"] .gc-page :is(h1,p,a,span,b,li,ol,label,legend,input,textarea,button){ font-family:'Jost',sans-serif; }
html[data-pdp-design="b"] .gc-page :is(h1,p,ol){ margin:0; padding:0; }
html[data-pdp-design="b"] .gc-page fieldset{ margin:0; padding:0; border:0; min-width:0; }

html[data-pdp-design="b"] .gc-crumbs{ display:block; padding-top:var(--x5); }   /* the plate strip (.bcx-list, site-designs.css) */

html[data-pdp-design="b"] .gc-layout{ display:grid; grid-template-columns:minmax(0,5fr) minmax(0,6fr); gap:0 var(--x8); align-items:start; margin-top:var(--x6); }

/* card */
html[data-pdp-design="b"] .gc-visual{ position:sticky; top:var(--x5); min-width:0; }
html[data-pdp-design="b"] .gc-card{
    position:relative; display:flex; flex-direction:column; justify-content:space-between; aspect-ratio:1.586;
    padding:clamp(20px, 3vw, 40px); background:var(--ink); color:var(--paper); overflow:hidden;
}
html[data-pdp-design="b"] .gc-card::after{
    content:""; position:absolute; right:-18%; top:-30%; width:70%; aspect-ratio:1; border:1px solid rgba(255,255,255,.14); transform:rotate(45deg);
}
html[data-pdp-design="b"] .gc-page .gc-card-brand{ font-size:clamp(22px, 2vw, 32px) !important; font-weight:300; letter-spacing:.02em; color:var(--paper) !important; }
html[data-pdp-design="b"] .gc-page .gc-card-label{
    margin-top:var(--x1); font-size:var(--t-xs) !important; font-weight:500; letter-spacing:.2em; text-transform:uppercase; color:rgba(255,255,255,.7) !important;
}
html[data-pdp-design="b"] .gc-page .gc-card-amount{
    margin-top:auto; font-size:clamp(48px, 6vw, 88px) !important; font-weight:200; line-height:1; letter-spacing:-.03em; color:var(--paper) !important; font-variant-numeric:tabular-nums;
}
html[data-pdp-design="b"] .gc-page .gc-card-to{ min-height:1.4em; margin-top:var(--x2); font-size:var(--t-base) !important; color:rgba(255,255,255,.8) !important; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
html[data-pdp-design="b"] .gc-steps{ list-style:none; margin-top:var(--x6) !important; border-top:1px solid var(--rule); }
html[data-pdp-design="b"] .gc-page .gc-steps li{ display:flex; gap:var(--x4); padding:var(--x3) 0; border-bottom:1px solid var(--rule); font-size:var(--t-base) !important; line-height:1.5; color:var(--ink2) !important; }
html[data-pdp-design="b"] .gc-page .gc-steps b{ flex:0 0 auto; font-weight:500; font-size:var(--t-sm); letter-spacing:.08em; color:var(--muted); font-variant-numeric:tabular-nums; }

/* head */
html[data-pdp-design="b"] .gc-main{ min-width:0; }
html[data-pdp-design="b"] .gc-page .gc-title{
    font-size:clamp(32px, 1.6vw + 22px, 52px) !important; font-weight:200 !important; line-height:1.05 !important; letter-spacing:-.02em !important;
    text-transform:none !important; color:var(--ink) !important;
}
html[data-pdp-design="b"] .gc-page .gc-lede{ margin-top:var(--x4) !important; font-size:var(--t-lg) !important; line-height:1.6; color:var(--ink2) !important; }
html[data-pdp-design="b"] .gc-page .gc-note{ margin-top:var(--x5) !important; padding:var(--x3) var(--x4) !important; border-left:2px solid var(--ink); background:var(--surface); font-size:var(--t-base) !important; color:var(--ink) !important; }
html[data-pdp-design="b"] .gc-page .gc-note--err{ border-left-color:var(--gc-err); }
html[data-pdp-design="b"] .gc-page .gc-note p{ margin:0 !important; font-size:inherit !important; color:inherit !important; }

/* form */
html[data-pdp-design="b"] .gc-form{ display:flex; flex-direction:column; gap:var(--x6); margin-top:var(--x6); }
html[data-pdp-design="b"] .gc-page legend,
html[data-pdp-design="b"] .gc-page .gc-field label{
    display:block; margin:0 0 var(--x2) !important; padding:0 !important; float:none; width:auto;
    font-size:var(--t-xs) !important; font-weight:500 !important; line-height:1.4 !important; letter-spacing:.16em !important; text-transform:uppercase !important; color:var(--ink2) !important;
}
html[data-pdp-design="b"] .gc-amount-grid{ display:grid; grid-template-columns:repeat(4, minmax(0,1fr)) minmax(0,1.6fr); gap:var(--x2); }
html[data-pdp-design="b"] .gc-amount{ position:relative; margin:0 !important; cursor:pointer; }
html[data-pdp-design="b"] .gc-amount > input[type="radio"]{ position:absolute; opacity:0; width:1px; height:1px; }
html[data-pdp-design="b"] .gc-page .gc-amount > span{
    display:flex; align-items:center; justify-content:center; height:56px; border:1px solid var(--rule); background:var(--paper);
    font-size:var(--t-lg) !important; font-weight:400; color:var(--ink) !important; font-variant-numeric:tabular-nums; transition:border-color .15s ease;
}
html[data-pdp-design="b"] .gc-amount:hover > span{ border-color:var(--ink2); }
html[data-pdp-design="b"] .gc-amount > input:checked + span{ border-color:var(--ink); box-shadow:inset 0 0 0 1px var(--ink); }
html[data-pdp-design="b"] .gc-amount > input:focus-visible + span{ outline:2px solid var(--ink); outline-offset:2px; }
html[data-pdp-design="b"] .gc-page .gc-amount-custom{ gap:var(--x1); padding:0 var(--x3); }
html[data-pdp-design="b"] .gc-page .gc-amount-custom input{
    width:100%; min-width:0; height:100% !important; margin:0 !important; padding:0 !important; border:0 !important; background:transparent !important; box-shadow:none !important; outline:none;
    font-size:16px !important; color:var(--ink) !important; -moz-appearance:textfield; appearance:textfield;
}
html[data-pdp-design="b"] .gc-amount-custom input::-webkit-outer-spin-button,
html[data-pdp-design="b"] .gc-amount-custom input::-webkit-inner-spin-button{ -webkit-appearance:none; margin:0; }
html[data-pdp-design="b"] .gc-amount-custom input::placeholder{ color:var(--muted); }

html[data-pdp-design="b"] .gc-row{ display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:var(--x5) var(--x4); }
html[data-pdp-design="b"] .gc-field{ display:flex; flex-direction:column; min-width:0; }
html[data-pdp-design="b"] .gc-field-top{ display:flex; align-items:baseline; justify-content:space-between; }
html[data-pdp-design="b"] .gc-page .gc-counter{ font-size:var(--t-sm) !important; color:var(--muted) !important; font-variant-numeric:tabular-nums; }
html[data-pdp-design="b"] .gc-page .gc-field :is(input, textarea){
    width:100% !important; margin:0 !important; padding:0 var(--x4) !important; border:1px solid var(--gc-field) !important; background:var(--paper) !important;
    box-shadow:none !important; outline:none; font-size:16px !important; line-height:1.5 !important; color:var(--ink) !important;
}
html[data-pdp-design="b"] .gc-page .gc-field input{ height:52px !important; }
html[data-pdp-design="b"] .gc-page .gc-field textarea{ min-height:120px; padding:var(--x3) var(--x4) !important; resize:vertical; }
html[data-pdp-design="b"] .gc-page .gc-field :is(input, textarea):focus{ border-color:var(--ink) !important; box-shadow:inset 0 0 0 1px var(--ink) !important; }
html[data-pdp-design="b"] .gc-page [aria-invalid="true"]{ border-color:var(--gc-err) !important; }

html[data-pdp-design="b"] .gc-pay-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(120px, 1fr)); gap:var(--x2); }
html[data-pdp-design="b"] .gc-pay-tile{ position:relative; margin:0 !important; cursor:pointer; }
html[data-pdp-design="b"] .gc-pay-tile > input{ position:absolute; opacity:0; width:1px; height:1px; }
html[data-pdp-design="b"] .gc-pay-box{
    display:flex; flex-direction:column; align-items:center; justify-content:center; gap:var(--x1); min-height:80px; padding:var(--x3);
    border:1px solid var(--rule); background:var(--paper); text-align:center; transition:border-color .15s ease;
}
html[data-pdp-design="b"] .gc-pay-box img{ max-width:88px; max-height:28px; object-fit:contain; filter:grayscale(1); }
html[data-pdp-design="b"] .gc-page .gc-pay-box span{ font-size:var(--t-sm) !important; line-height:1.3; color:var(--ink2) !important; }
html[data-pdp-design="b"] .gc-pay-tile:hover .gc-pay-box{ border-color:var(--ink2); }
html[data-pdp-design="b"] .gc-pay-tile > input:checked + .gc-pay-box{ border-color:var(--ink); box-shadow:inset 0 0 0 1px var(--ink); }
html[data-pdp-design="b"] .gc-pay-tile > input:checked + .gc-pay-box img,
html[data-pdp-design="b"] .gc-pay-tile:hover .gc-pay-box img{ filter:none; }
html[data-pdp-design="b"] .gc-pay-tile > input:focus-visible + .gc-pay-box{ outline:2px solid var(--ink); outline-offset:2px; }

html[data-pdp-design="b"] .gc-page .gc-btn{
    display:flex; align-items:center; justify-content:space-between; gap:var(--x4); width:100%; min-height:60px; margin:0; padding:0 var(--x5);
    background:var(--ink); border:1px solid var(--ink); color:var(--paper) !important; cursor:pointer; -webkit-appearance:none; appearance:none;
    transition:background-color .2s ease, color .2s ease;
}
html[data-pdp-design="b"] .gc-page .gc-btn span{ font-size:var(--t-base) !important; font-weight:500; letter-spacing:.16em; text-transform:uppercase; color:inherit !important; }
html[data-pdp-design="b"] .gc-page .gc-btn .gc-btn-sum{ font-size:var(--t-xl) !important; font-weight:300; letter-spacing:0; text-transform:none; font-variant-numeric:tabular-nums; }
html[data-pdp-design="b"] .gc-page .gc-btn:hover{ background:var(--paper); color:var(--ink) !important; }
html[data-pdp-design="b"] .gc-page .gc-btn:disabled{ opacity:.5; cursor:default; }
html[data-pdp-design="b"] .gc-page .gc-btn.is-busy{ cursor:progress; }
html[data-pdp-design="b"] .gc-page .gc-fine{ margin-top:calc(var(--x4) * -1) !important; font-size:var(--t-sm) !important; color:var(--muted) !important; }

@media (max-width:991.98px){
    html[data-pdp-design="b"] .gc-page{ padding:0 var(--x5) var(--x8); }
    html[data-pdp-design="b"] .gc-layout{ grid-template-columns:minmax(0,1fr); gap:var(--x6); max-width:640px; }
    html[data-pdp-design="b"] .gc-visual{ position:static; }
    html[data-pdp-design="b"] .gc-steps{ display:none; }
}
@media (max-width:767.98px){
    html[data-pdp-design="b"] .gc-page{ padding:0 var(--x4) var(--x7); }
    html[data-pdp-design="b"] .gc-amount-grid{ grid-template-columns:repeat(4, minmax(0,1fr)); }
    html[data-pdp-design="b"] .gc-amount--custom{ grid-column:1 / -1; }
    html[data-pdp-design="b"] .gc-row{ grid-template-columns:minmax(0,1fr); }
    html[data-pdp-design="b"] .gc-pay-grid{ grid-template-columns:repeat(2, minmax(0,1fr)); }
}
html[data-pdp-design="b"] .gc-page :is(a, button):focus-visible{ outline:2px solid var(--ink) !important; outline-offset:2px; }