:root{
    --cg-blue:   #2d337f;                 --cg-accent: #b89b65;                 --cg-font : "Inter","Helvetica Neue",sans-serif;
    --cg-surface: #eef0fa;                --cg-surface-edge: #d9dcf0;           --cg-neutral: #4b4f5a; 
}

.toolbar-products{
    display:flex; flex-wrap:wrap;
    align-items:center; gap:1.4rem;
    justify-content:space-between;

    padding:.9rem 1.6rem;
    background:var(--cg-surface);
    border:1px solid var(--cg-surface-edge);
    border-radius:10px;
    box-shadow:0 2px 6px rgba(0,0,0,.05);

    font:500 1.3rem/1.35 var(--cg-font);
}


.toolbar-amount{
    color:var(--cg-neutral);
    font-weight:500;
}

.toolbar-products .sorter{
    display:flex; align-items:center; gap:.6rem;
}

.toolbar-products label{               margin:0;
    font-weight:600;
    color:var(--cg-blue);
    margin-top: 8px !important;
  margin-right: 10px;
}

.toolbar-products .sorter select,
.toolbar-products .limiter .control select{
    appearance:none;                   padding:.45rem 2.2rem .45rem .9rem;
    font:500 .95rem var(--cg-font);
    color:var(--cg-neutral);
    background:
        linear-gradient(145deg,#fff 0%,#f0f0f0 100%) padding-box,
        linear-gradient(145deg,var(--cg-accent) 0%,var(--cg-accent) 100%) border-box;
    border:1px solid var(--cg-accent);
    border-radius:6px;
    cursor:pointer;
    transition:box-shadow .22s ease, transform .22s ease;
}
.toolbar-products .sorter select:hover,
.toolbar-products .limiter .control select:hover{
    box-shadow:0 0 0 2px color-mix(in srgb,var(--cg-accent) 40%,transparent);
}
.toolbar-products .sorter select:focus-visible,
.toolbar-products .limiter .control select:focus-visible{
    outline:none;
    box-shadow:0 0 0 3px color-mix(in srgb,var(--cg-accent) 55%,transparent);
}

.toolbar-products .sorter select,
.toolbar-products .limiter .control select{
    background-image:
        url("data:image/svg+xml,%3Csvg fill='none' stroke='%232d337f' stroke-width='2' viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E");
    background-repeat:no-repeat;
    background-position:right .9rem center;
    background-size:.85rem;
}

.toolbar-products .sorter .sorter-action{
    font-size:1.2rem;
    line-height:1;
    padding:.35rem;
    border-radius:4px;
    color:var(--cg-neutral);
    transition:color .22s ease, transform .22s ease;
    cursor:pointer;
}
.toolbar-products .sorter .sorter-action:hover,
.toolbar-products .sorter .sorter-action:focus-visible{
    color:var(--cg-accent);
    transform:translateY(-2px);
}

.toolbar-products .limiter{
    display:flex; align-items:center; gap:.6rem;
}

.toolbar-products .modes{
    display:flex; align-items:center; gap:.8rem;
    font-weight:600; color:var(--cg-neutral);
}

.toolbar-products .modes a{
    display:inline-grid; place-items:center;
    width:2.2rem; height:2.2rem;
    border-radius:4px;
    color:var(--cg-blue);
    transition:background .22s ease, color .22s ease, transform .22s ease;
}
.toolbar-products .modes a.active,
.toolbar-products .modes a:hover{
    
    color:#fff;
    transform:translateY(-2px);
}

.toolbar-products .modes a svg,
.toolbar-products .modes a i{
    width:1.2rem; height:1.2rem;
    stroke:currentColor; fill:currentColor;
    pointer-events:none;
}

@media (max-width:700px){
    .toolbar-products{
        flex-direction:column;
        align-items:flex-start;
    }
    .toolbar-products .modes{
        margin-top:.6rem;
    }
}

.toolbar-products .sorter,
.toolbar-products .limiter{
    padding:.2rem .4rem;             background:transparent;          border:none;                     gap:.55rem;                  }

.toolbar-products .sorter select,
.toolbar-products .limiter .control select{
    height:2.35rem;                  padding:.45rem 2.2rem .45rem .9rem;
    border-radius:18px;          
    background:
        linear-gradient(#fff,#f8f9fb) padding-box,
        var(--cg-accent) border-box;
    border:1px solid var(--cg-accent);

        box-shadow:0 1px 2px rgba(0,0,0,.05) inset;

    transition:box-shadow .18s ease, transform .18s ease;
}
.toolbar-products .sorter select:hover,
.toolbar-products .limiter .control select:hover{
    box-shadow:
        0 1px 2px rgba(0,0,0,.05) inset,
        0 0 0 2px rgba(184,155,101,.25);
}
.toolbar-products .sorter select:focus-visible,
.toolbar-products .limiter .control select:focus-visible{
    outline:none;
    box-shadow:
        0 1px 2px rgba(0,0,0,.05) inset,
        0 0 0 3px rgba(184,155,101,.45);
    transform:translateY(-1px);  }

.toolbar-products .sorter select,
.toolbar-products .limiter .control select{
        background-color:#fff;

        border:1px solid var(--cg-accent);

        box-shadow:0 1px 2px rgba(0,0,0,.05) inset;

        background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='8' fill='none' stroke='%232d337f' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 1l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat:no-repeat;
    background-position:right .9rem center;
    background-size:.8rem;
}

.toolbar-products select option{
    background:#fff !important;
    color:#2d2d2d !important;
}
.toolbar-products .sorter select,
.toolbar-products .limiter .control select{
    font-size:1.1rem;   }

     
@media (max-width: 700px) {

    
    .cg-toolbar {
        display:block;
        margin:0 0 1rem;   
    }
  
    
    .cg-toolbar__toggle {
        display:flex; align-items:center; justify-content:center;
        gap:.6rem;
        width:100%;
        padding:.9rem 1.2rem;
        background:var(--cg-surface);
        border:1px solid var(--cg-surface-edge);
        border-radius:10px;
        font:600 1.1rem var(--cg-font);
        color:var(--cg-blue);
        cursor:pointer;
        list-style:none;     
    }
  
    
    .cg-toolbar[open] .cg-toolbar__toggle svg { transform:rotate(90deg); transition:transform .25s ease; }
  
    
    .cg-toolbar[open] .toolbar-products {
        margin-top:0;           
        padding:1rem 1.4rem;
        border:1px solid var(--cg-surface-edge);
        border-top:none;
        border-radius:0 0 10px 10px;
        background:var(--cg-surface);
    }
  
    
    .cg-toolbar:not([open]) .toolbar-products { display:none; }
  }
  
  @media (min-width:701px){
    .cg-toolbar__toggle { display:none; }          
}

@media (max-width:700px){
    
    details.cg-toolbar:not(:first-of-type) > .cg-toolbar__toggle { display:none; }
  }
  
  
  @media (min-width:701px){
    
    .cg-toolbar .toolbar-products { display:flex !important; }
  }
  
  
@media (max-width: 700px) {
    .filter-mobile-btn{
        
        display:flex; align-items:center; justify-content:center;
        gap:.55rem;
  
        
        padding:.9rem 1.6rem;
        margin-block-end:.8rem;
  
        
        background:var(--cg-surface,#eef0fa);
        border:1px solid var(--cg-surface-edge,#d9dcf0);
        border-radius:14px;
        box-shadow:0 2px 6px rgba(0,0,0,.05);
        cursor:pointer;
        user-select:none;
  
        
        font:600 1.25rem/1 var(--cg-font,"Inter","Helvetica Neue",sans-serif);
        color:var(--cg-blue,#2d337f);
       
        letter-spacing:.25px;
  
        
        transition:
            background .22s ease,
            transform  .18s cubic-bezier(.16,.8,.36,1),
            box-shadow .18s cubic-bezier(.16,.8,.36,1);
    }
    .filter-mobile-btn:is(:hover,:focus-visible){
        background:var(--cg-accent,#b89b65);
        color:#fff;
        transform:translateY(-2px);
        box-shadow:0 4px 12px rgba(0,0,0,.12);
        outline:none;
    }
  
    
    .filter-mobile-btn::before{
        content:"\f2c7";
        font-family:'mbicon';
        -webkit-font-smoothing:antialiased;
           -moz-osx-font-smoothing:grayscale;
        font-size:1.6rem; line-height:1;
        display:inline-block;
    }
  }
  
  
  @media (prefers-reduced-motion: reduce){
    .filter-mobile-btn{transition:none;}
  }
  
  
  
  
  
  .filter-mobile-btn .mbi-io-add{       
      display:none !important;          
  }
  
  .filter-mobile-btn .text{          
      text-transform:none !important;   
      letter-spacing:.15px;             
  }
  @media (min-width: 1260px) {
    .magezon-builder .mgz-container {width: 1260px;}
}
/* ===========================================================
CaptainGreek checkout — premium ship-cards
Scope to checkout only to avoid surprises.
=========================================================== */

.checkout-index-index {
--cg-gold: #b8925a;
--cg-ink:  #212121;
--cg-muted:#7a7a7a;
--cg-stroke: rgba(0,0,0,.08);
--cg-shadow: 0 8px 30px rgba(0,0,0,.08);
--cg-shadow-hover: 0 14px 40px rgba(0,0,0,.12);
}

/* Title cosmetic (black text + gold underline) */
.checkout-index-index .checkout-shipping-method .step-title{
color:#191919;
font-weight:800;
letter-spacing:.01em;
position:relative;
}
.checkout-index-index .checkout-shipping-method .step-title::after{
content:"";
display:block;
width:110px;height:4px;margin-top:10px;border-radius:2px;
background:var(--cg-gold);
}

/* Remove the default table header; we render our own labels in the card */
.checkout-index-index .table-checkout-shipping-method thead{display:none}

/* Turn the row into a grid with a radio gutter + full-width card */
.checkout-index-index .table-checkout-shipping-method .table-row.cgrk-ship-card{
display:grid;
grid-template-columns: 48px 1fr;   /* radio | card */
gap: 0 16px;
align-items: start;
border:0;
}
.checkout-index-index .table-checkout-shipping-method .table-row.cgrk-ship-card > .table-col{
border:0; padding:0;
}

/* hide Magento’s extra cells for our enhanced rows */
.checkout-index-index .table-checkout-shipping-method .table-row.cgrk-ship-card .col-price,
.checkout-index-index .table-checkout-shipping-method .table-row.cgrk-ship-card .col-carrier{
display:none !important;
}

/* ensure the second .col-method (the one with the card) spans both grid columns */
.checkout-index-index .table-checkout-shipping-method .table-row.cgrk-ship-card > .col-method:last-of-type{
grid-column: 1 / -1;
}

/* The card itself */
.checkout-index-index .table-checkout-shipping-method .cgrk-card{
margin-left: calc(48px + 16px);     /* clear the radio gutter */
background:#fff;
border:1px solid var(--cg-stroke);
border-radius:16px;
box-shadow: var(--cg-shadow);
padding: 22px 26px;
transition: box-shadow .18s ease, border-color .18s ease;
}
.checkout-index-index .table-checkout-shipping-method .cgrk-card:hover{
border-color: rgba(184,146,90,.45);
box-shadow: var(--cg-shadow-hover);
}

/* Selected state (see JS below toggling .is-selected) */
.checkout-index-index .table-checkout-shipping-method .table-row.cgrk-ship-card.is-selected .cgrk-card{
border-color: var(--cg-gold);
box-shadow: 0 16px 44px rgba(184,146,90,.18);
}

/* --- 4-column content grid inside the card ----------------------------- */
.checkout-index-index .table-checkout-shipping-method .cgrk-card-body{
display:grid;
grid-template-columns: 1fr 1fr 1.2fr 1.2fr;   /* Price | Type | Service | ETA */
grid-template-areas: "price type service eta";
column-gap: 32px;
align-items:start;
}

/* stack label (key) over value in each cell */
.checkout-index-index .cgrk-ship-card .cgrk-row{
display:flex; flex-direction:column; gap:8px;
}
.checkout-index-index .cgrk-ship-card .cgrk-row.cgrk-price   { grid-area: price; }
.checkout-index-index .cgrk-ship-card .cgrk-row.cgrk-type    { grid-area: type; }
.checkout-index-index .cgrk-ship-card .cgrk-row.cgrk-service { grid-area: service; }
.checkout-index-index .cgrk-ship-card .cgrk-row.cgrk-eta     { grid-area: eta; }

/* micro labels */
.checkout-index-index .cgrk-ship-card .cgrk-key{
color: var(--cg-muted);
font-size: .82rem;
letter-spacing: .08em;
text-transform: uppercase;
}

/* values — premium hierarchy */
.checkout-index-index .cgrk-ship-card .cgrk-val{ font-weight: 650; color:var(--cg-ink); }

/* price: big, branded */
.checkout-index-index .cgrk-ship-card .cgrk-row.cgrk-price .cgrk-val{
font-size: 2.05rem; font-weight: 800; color: var(--cg-gold);
}

/* type: firm */
.checkout-index-index .cgrk-ship-card .cgrk-row.cgrk-type .cgrk-val{
font-size: 1.12rem; font-weight: 700;
}

/* UPS service: headline weight */
.checkout-index-index .cgrk-ship-card .cgrk-row.cgrk-service .cgrk-val{
font-size: 1.28rem; font-weight: 800;
}

/* ETA: medium, keep line lengths comfortable */
.checkout-index-index .cgrk-ship-card .cgrk-row.cgrk-eta .cgrk-val{
font-size: 1.08rem; line-height: 1.35; max-width: 22ch;
}

/* radio alignment */
.checkout-index-index .table-checkout-shipping-method .col-method .field{
margin-top: 6px; display:flex; align-items:flex-start; justify-content:center;
}

/* Responsive: 2 columns on tablet, 1 column on mobile */
@media (max-width: 1024px){
.checkout-index-index .table-checkout-shipping-method .cgrk-card-body{
grid-template-columns: 1fr 1fr;
grid-template-areas:
  "price type"
  "service eta";
row-gap: 18px;
}
}
@media (max-width: 640px){
.checkout-index-index .table-checkout-shipping-method .table-row.cgrk-ship-card{
grid-template-columns: 40px 1fr;
}
.checkout-index-index .table-checkout-shipping-method .cgrk-card{
margin-left: calc(40px + 12px);
padding: 18px 18px;
}
.checkout-index-index .table-checkout-shipping-method .cgrk-card-body{
grid-template-columns: 1fr;
grid-template-areas: "price" "type" "service" "eta";
row-gap: 14px;
}
}

/* Wider main column so cards have breathing room on big screens */
@media (min-width:1280px){
.checkout-index-index .opc-wrapper{ max-width: 1040px; margin: 0 auto; }
}
/* ========= PREMIUM POLISH: spacing + button alignment ========== */

/* 0) Give the whole shipping block some bottom air so it doesn't hit footer */
.checkout-index-index .opc-wrapper { padding-bottom: 48px; }

/* 1) More breathing room between choices */
.checkout-index-index .table-checkout-shipping-method .cgrk-card {
margin-bottom: 22px;                      /* space between cards */
border-radius: 18px;                      /* a touch softer */
}

/* 2) Make the radio sit centered next to each card */
.checkout-index-index .table-checkout-shipping-method .table-row.cgrk-ship-card {
min-height: 122px;
}
.checkout-index-index .table-checkout-shipping-method
.table-row.cgrk-ship-card > .col-method:first-child .field{
height: 100%;
display: flex;
align-items: center;                       /* vertically center the circle */
justify-content: center;
}

/* 3) Align the "Next" bar with the card stack and keep it clear of the last card */
.checkout-index-index #shipping-method-buttons-container {
/* same center width as the cards */
max-width: 1040px;
margin: 12px auto 6px;                     /* centered, below cards */
padding-left: calc(48px + 16px);           /* offset for radio gutter so it lines up with cards */
}
.checkout-index-index #shipping-method-buttons-container .primary { position: relative; }
.checkout-index-index #shipping-method-buttons-container .primary::after {
content:""; display:block; clear:both;     /* clearfix for float below */
}
.checkout-index-index #shipping-method-buttons-container .button.action.primary {
float: right;                              /* right align within the same content width */
background: var(--cg-gold, #b8925a);
border-color: var(--cg-gold, #b8925a);
color: #fff;
min-width: 168px;
height: 56px;
line-height: 56px;
padding: 0 24px;
font-size: 1.125rem;
border-radius: 12px;
box-shadow: 0 8px 20px rgba(184,146,90,.24);
}
.checkout-index-index #shipping-method-buttons-container .button.action.primary:hover{
filter: brightness(1.03);
box-shadow: 0 12px 28px rgba(184,146,90,.28);
}

/* 4) Tweak the inner 4-col grid so the last column doesn’t feel cramped */
.checkout-index-index .table-checkout-shipping-method .cgrk-card-body{
column-gap: 36px;                          /* a bit more air between columns */
}

/* 5) Mobile: keep spacing and button readable */
@media (max-width: 640px){
.checkout-index-index .table-checkout-shipping-method .cgrk-card { margin-bottom: 18px; }
.checkout-index-index #shipping-method-buttons-container{
max-width: 100%;
padding-left: calc(40px + 12px);         /* the smaller radio gutter used on mobile */
margin-top: 8px;
}
.checkout-index-index #shipping-method-buttons-container .button.action.primary{
width: 100%;
float: none;
}
}
/* The radio column */
.checkout-index-index .table-checkout-shipping-method .col-method .field{
display:flex;
align-items:center;
justify-content:center;
min-width: 40px;                 /* gives a nice gutter */
height: 100%;
}

/* The label becomes the positioning context, full height */
.checkout-index-index .table-checkout-shipping-method .col-method .field label{
position: relative;
display: block;
width: 28px;                     /* hit area */
height: 100%;
cursor: pointer;
}

/* Hide native input so you don't see 2 radios */
.checkout-index-index .table-checkout-shipping-method .col-method .field input[type="radio"]{
position: absolute !important;
opacity: 0 !important;
}

/* Center the custom circle vertically against the full-height label */
.checkout-index-index .table-checkout-shipping-method .col-method
.field input[type="radio"] + label::before,
.checkout-index-index .table-checkout-shipping-method .col-method
.field input[type="radio"]:checked + label::after{
top: 50%;
transform: translateY(-50%);
margin-top: 0;                   /* kill the old -8px hack */
}
/* Make the enhanced rows card-only (no left radio gutter) */
.checkout-index-index .table-checkout-shipping-method .table-row.cgrk-ship-card {
display: block;                 /* drop the previous 2-col grid */
min-height: 0;                  /* card height will drive the row */
}

/* Hide the left radio cell entirely */
.checkout-index-index .table-checkout-shipping-method .table-row.cgrk-ship-card > .col-method:first-child {
display: none !important;
}

/* The card no longer needs a left offset */
.checkout-index-index .table-checkout-shipping-method .cgrk-card {
margin-left: 0 !important;
}

/* Keep the usual space between choices, and soften the look a touch */
.checkout-index-index .table-checkout-shipping-method .cgrk-card {
margin-bottom: 22px;            /* breathing room between cards */
border-radius: 18px;
}

/* Since there’s no gutter anymore, align the Next bar with the card edge */
.checkout-index-index #shipping-method-buttons-container {
max-width: 1040px;
margin: 16px auto 6px;
padding-left: 0 !important;     /* was offset for the radio gutter; not needed */
}
/* --- 0) padding under the title --------------------------------------- */
.checkout-index-index .table-checkout-shipping-method{
margin-top: 18px;              /* breathing room after “Shipping Methods” */
}

/* --- 1) make every enhanced row full-width block, kill any grid remains */
.checkout-index-index .table-checkout-shipping-method .table-row.cgrk-ship-card{
display: block !important;
grid-template-columns: none !important;    /* in case any row still keeps grid */
width: 100%;
}

/* label TD that holds our card = full width block */
.checkout-index-index .table-checkout-shipping-method
.table-row.cgrk-ship-card > .col-method[id^="label_method_"]{
display: block !important;
width: 100% !important;
padding: 0; border: 0;
}

/* the hidden radio TD stays hidden; keeps widths consistent */
.checkout-index-index .table-checkout-shipping-method
.table-row.cgrk-ship-card > .col-method:first-child{
display: none !important;
}

/* --- 2) the card itself always fills the row --------------------------- */
.checkout-index-index .table-checkout-shipping-method .cgrk-card{
width: 100% !important;
margin-left: 0 !important;
box-sizing: border-box;        /* padding + border within the width */
margin-bottom: 22px;           /* space between choices */
border-radius: 18px;
min-height: 120px;             /* keeps visual height uniform */
}

/* (optional) keep the selected outline just a color change (no width jump) */
.checkout-index-index .table-checkout-shipping-method
.table-row.cgrk-ship-card.is-selected .cgrk-card{
border-width: 1px;             /* same width as normal state */
border-color: var(--cg-gold);
}

/* --- 3) align the Next bar to the same content width ------------------ */
.checkout-index-index #shipping-method-buttons-container{
max-width: 1040px;
margin: 16px auto 6px;
padding-left: 0 !important;    /* no radio gutter anymore */
}