/* ==========================================================
   BDA BAZAR - SHARED PRODUCT CARD + GRID
   ----------------------------------------------------------
   Single source of truth for every surface that lists products:
   homepage rows, category, section, search results, related
   products and the vendor store page.

   Loaded LAST in header.php on purpose. Page-scoped sheets
   (home-redesign.css / product-redesign.css / store-page.css)
   style layout around the card; the card skin itself lives
   only here. Rules are scoped to body.bda-storefront so they
   match the specificity of those sheets and win on source
   order - no !important needed.

   Palette (design system):
     navy    #0b2545   orange      #f26a1b   orange hover #d95612
     success #1d8f45   success bg  #e7f8ed
     ink     #0f2340   muted       #5c6b80
     line    #e4e9f0   page        #f7f9fc
     gold    #f4b400   discount bg #fff0e6
   No gradients, no neon accents inside the card.
   ========================================================== */

/* ----------------------------------------------------------
   0. CARD TOKENS
   One place to retune the card. Every rule below reads these,
   so the homepage rows and the listing grids can never drift
   apart again.
   ---------------------------------------------------------- */
body.bda-storefront{
    --card-bg:            #ffffff;
    --card-line:          #e4e9f0;
    --card-radius:        14px;
    --card-shadow:        0 1px 2px rgba(11,37,69,.04), 0 4px 12px rgba(11,37,69,.05);
    --card-shadow-hover:  0 2px 4px rgba(11,37,69,.05), 0 12px 26px rgba(11,37,69,.10);

    --card-navy:          #0b2545;
    --card-orange:        #f26a1b;
    --card-orange-hover:  #d95612;
    --card-ink:           #0f2340;
    --card-muted:         #5c6b80;
    --card-gold:          #f4b400;
    --card-star-empty:    #d7dee8;
    --card-success:       #1d8f45;
    --card-success-bg:    #e7f8ed;
    --card-discount:      #d95612;
    --card-discount-bg:   #fff0e6;
    --card-out:           #b3261e;
    --card-out-bg:        #fdecea;

    --card-pad:           12px;
    /* the image stage is a 1:1 square (see section 3) - no height token */
    --card-title-h:       36px;    /* exactly two clamped lines */
    --card-rating-h:      18px;
    --card-price-h:       22px;
    --card-delivery-h:    18px;
    --card-btn-h:         44px;
}

@media (min-width: 600px){
    body.bda-storefront{
        --card-pad:        12px;
        --card-title-h:    38px;
        --card-rating-h:   18px;
        --card-price-h:    24px;
        --card-delivery-h: 19px;
        --card-btn-h:      42px;
    }
}
@media (min-width: 1024px){
    body.bda-storefront{
        --card-pad:        13px;
        --card-title-h:    40px;
        --card-rating-h:   19px;
        --card-price-h:    25px;
        --card-delivery-h: 20px;
        --card-btn-h:      44px;
    }
}

/* ----------------------------------------------------------
   1. LISTING GRID (category / section / search / store)
   minmax(0,1fr) is what stops a long word or wide image from
   pushing a track past its share and causing page overflow.
   ---------------------------------------------------------- */
body.bda-storefront .bda-product-grid{
    display:grid;
    grid-template-columns:repeat(2, minmax(0, 1fr));
    gap:12px;
    margin:0;
    padding:0;
    list-style:none;
    width:100%;
    min-width:0;
}

/* Column count rises with the viewport so the square image tile stays a
   sensible size. The container runs to 1680px: at four columns that made
   each tile ~400px on a 1920 screen, which turned one row into a whole
   screenful. Density is what keeps a product looking like a product. */
@media (min-width: 600px){
    body.bda-storefront .bda-product-grid{
        grid-template-columns:repeat(3, minmax(0, 1fr));
        gap:14px;
    }
}
@media (min-width: 992px){
    body.bda-storefront .bda-product-grid{
        grid-template-columns:repeat(4, minmax(0, 1fr));
        gap:16px;
    }
}
@media (min-width: 1280px){
    body.bda-storefront .bda-product-grid{
        grid-template-columns:repeat(5, minmax(0, 1fr));
        gap:18px;
    }
}
/* the full-catalogue listings can afford one more column than the homepage
   rows - they are never five items long */
@media (min-width: 1560px){
    body.bda-storefront .bda-product-grid{
        grid-template-columns:repeat(6, minmax(0, 1fr));
    }
}

/* ----------------------------------------------------------
   2. CARD SHELL
   Every card in a row ends up the same height: the grid/flex
   item stretches, the inner card fills it, and the actions
   block is pushed down with margin-top:auto - which is what
   keeps a 2-line title and a 1-line title on the same baseline.
   ---------------------------------------------------------- */
body.bda-storefront .mf-product-card{
    padding:0;
    display:flex;
    min-width:0;          /* without this a long title overflows the track */
    width:100%;
}

/* The image tile is inset by the card's own padding rather than running
   edge to edge - it reads as a product tile inside a card, which is what
   keeps a row of mixed photos looking deliberate. */
body.bda-storefront .mf-product-inner{
    position:relative;
    display:flex;
    flex-direction:column;
    width:100%;
    height:100%;
    padding:var(--card-pad);
    background:var(--card-bg);
    border:1px solid var(--card-line);
    border-radius:var(--card-radius);
    box-shadow:var(--card-shadow);
    transition:box-shadow .2s ease, border-color .2s ease;
}
body.bda-storefront .mf-product-inner:hover{
    box-shadow:var(--card-shadow-hover);
    border-color:#d7dee8;
}
body.bda-storefront .mf-product-inner:focus-within{
    border-color:var(--card-orange);
}

/* ----------------------------------------------------------
   3. IMAGE STAGE
   A square tile, inset inside the card, that the photo fills.

   The shape problem is solved in the FILE, not here.
   tools/trim_product_images.php normalises every catalogue
   photo to 1:1 - it trims the dead background border and then
   pastes the product, whole and centred, onto a square canvas.
   Measured on this catalogue the source ratios ran 0.65 to
   2.12, which no single CSS rule can reconcile: contain leaves
   ragged gutters, cover slices packaging off. Once the files
   are square, a square tile just works.

   object-fit is contain rather than cover on purpose. For a
   square file the two are identical, but a photo uploaded
   before the tool has run degrades to a letterbox instead of
   being cropped - it can never cut a product.

   aspect-ratio reserves the height before the image loads, so
   lazy loading shifts nothing.
   ---------------------------------------------------------- */
body.bda-storefront .mf-product-image{
    position:relative;
    display:block;
    width:100%;
    aspect-ratio:1 / 1;
    padding:0;
    background:#fff;
    border:1px solid #eef2f7;
    border-radius:10px;
    flex:0 0 auto;
    overflow:hidden;
}
body.bda-storefront .mf-product-image img{
    display:block;
    width:100%;
    height:100%;
    object-fit:contain;
    object-position:center center;
    transition:transform .3s ease;
}
body.bda-storefront .mf-product-inner:hover .mf-product-image img{
    transform:scale(1.04);
}

/* The generated "image missing" graphic is a drawing, not a photo:
   it gets breathing room and a flat light tile. */
body.bda-storefront .mf-product-image img.is-placeholder{
    padding:18%;
    background:#f1f4f8;
}
body.bda-storefront .mf-product-inner:hover .mf-product-image img.is-placeholder{
    transform:none;
}

/* ----------------------------------------------------------
   4. BADGES
   Stock pill top-left, discount pill top-right - they never
   share a corner, so they cannot overlap each other. Both
   carry text, so stock and discount are never signalled by
   colour alone.
   ---------------------------------------------------------- */
/* offsets are measured from the image tile, which the card's padding
   has pushed inwards */
body.bda-storefront .mf-stock-badge,
body.bda-storefront .bda-discount-badge{
    position:absolute;
    top:calc(var(--card-pad) + 8px);
    z-index:3;
    padding:4px 10px;
    border-radius:999px;
    font-size:10.5px;
    font-weight:700;
    line-height:1.4;
    letter-spacing:.2px;
    text-transform:uppercase;
    white-space:nowrap;
    max-width:calc(50% - 12px);
    overflow:hidden;
    text-overflow:ellipsis;
}

body.bda-storefront .mf-stock-badge{left:calc(var(--card-pad) + 8px);}
body.bda-storefront .mf-stock-badge.in{background:var(--card-success-bg);color:var(--card-success);}
body.bda-storefront .mf-stock-badge.out{background:var(--card-out-bg);color:var(--card-out);}

body.bda-storefront .bda-discount-badge{
    right:calc(var(--card-pad) + 8px);
    left:auto;
    background:var(--card-discount-bg);
    color:var(--card-discount);
}
/* the span is only a hook - "13% OFF" must stay on one line */
body.bda-storefront .bda-discount-badge span{
    display:inline;
    font-size:inherit;
    font-weight:inherit;
    letter-spacing:inherit;
    margin:0;
}

/* Small phones: "Out of Stock" and "32% OFF" have to share a ~140px tile.
   At the default size one of them truncated to "OUT OF S..."; trimming the
   type and padding lets both read in full. */
@media (max-width: 420px){
    body.bda-storefront .mf-stock-badge,
    body.bda-storefront .bda-discount-badge{
        font-size:9.5px;
        padding:3px 7px;
        letter-spacing:0;
    }
}

@media (min-width: 1024px){
    body.bda-storefront .mf-stock-badge,
    body.bda-storefront .bda-discount-badge{font-size:11.5px;padding:5px 11px;}
}

/* ----------------------------------------------------------
   5. INFO BLOCK
   ---------------------------------------------------------- */
/* the card already carries the padding, so the info block only needs
   the gap that separates it from the image tile above */
body.bda-storefront .mf-product-info{
    display:flex;
    flex-direction:column;
    flex:1 1 auto;
    padding:9px 0 0;
    min-width:0;
}

/* Title: exactly two lines at every width. Reserving both the
   min and the max height keeps a one-line title from making
   its card shorter than its neighbours. */
body.bda-storefront .mf-product-info h3{
    margin:0 0 6px;
    font-size:13px;
    line-height:1.35;
    font-weight:700;
    min-height:var(--card-title-h);
    max-height:var(--card-title-h);
    overflow:hidden;
    display:-webkit-box;
    -webkit-line-clamp:2;
    line-clamp:2;
    -webkit-box-orient:vertical;
    word-break:break-word;
    overflow-wrap:anywhere;
}
body.bda-storefront .mf-product-info h3 a{
    color:var(--card-navy);
    text-decoration:none;
}
body.bda-storefront .mf-product-info h3 a:hover{
    color:var(--card-orange);
}

@media (min-width: 600px){
    body.bda-storefront .mf-product-info h3{font-size:14px;}
}
@media (min-width: 1024px){
    body.bda-storefront .mf-product-info h3{font-size:14.5px;}
}

/* Meta row: stars on the left, delivery on the right. The stars
   never came close to filling their own line, so the delivery
   timeline shares it instead of costing the card another row. */
body.bda-storefront .mf-meta-row{
    display:flex;
    align-items:center;
    justify-content:space-between;
    flex-wrap:wrap;      /* a very narrow card drops delivery to its own line
                            rather than overflowing the card */
    gap:2px 8px;
    margin:0 0 10px;
    min-height:var(--card-rating-h);
    min-width:0;
}

/* Phones: a two-up card is ~140px wide, which cannot hold stars, a review
   label and a delivery time. The muted outline stars already say "not
   rated", so the words go and the delivery time keeps the space. */
@media (max-width: 599px){
    body.bda-storefront .mf-no-rating{display:none;}
}

/* Rating: five compact stars + the real average and count, on
   one line that never wraps. Same reserved height whether the
   product has reviews or not. */
body.bda-storefront .mf-rating{
    display:flex;
    align-items:center;
    gap:5px;
    margin:0;
    flex:0 1 auto;
    min-height:var(--card-rating-h);
    font-size:11.5px;
    line-height:1.2;
    white-space:nowrap;
    overflow:hidden;
    min-width:0;
}
body.bda-storefront .mf-rating-stars{
    flex:0 0 auto;
    display:inline-flex;
    gap:1px;
    color:var(--card-gold);
}
body.bda-storefront .mf-rating-stars .fa{font-size:11px;}
body.bda-storefront .mf-rating.is-empty .mf-rating-stars{color:var(--card-star-empty);}
body.bda-storefront .mf-rating-text{
    color:var(--card-muted);
    min-width:0;
    overflow:hidden;
    text-overflow:ellipsis;
}
body.bda-storefront .mf-no-rating{
    color:var(--card-muted);
    min-width:0;
    overflow:hidden;
    text-overflow:ellipsis;
}

@media (min-width: 1024px){
    body.bda-storefront .mf-rating{font-size:12.5px;}
    body.bda-storefront .mf-rating-stars .fa{font-size:12px;}
}

/* Price: prominent selling price, smaller muted struck MRP.
   The template only emits the MRP when it is genuinely above
   the selling price, so nothing here can show a fake saving. */
/* min-height reserves exactly one price line, so the delivery row and the
   CTA below sit at the same offset on every card in a row even if one
   card's MRP is long enough to wrap. */
body.bda-storefront .mf-price-row{
    display:flex;
    align-items:baseline;
    flex-wrap:wrap;
    gap:2px 6px;
    margin:0 0 8px;
    min-height:var(--card-price-h);
    min-width:0;
}
body.bda-storefront .mf-price{
    display:inline-flex;
    align-items:baseline;
    gap:2px;
    color:var(--card-navy);
    min-width:0;
}
body.bda-storefront .mf-price-amount{
    font-size:16px;
    font-weight:800;
    line-height:1.25;
    white-space:nowrap;
}
body.bda-storefront .mf-old-price{
    font-size:11.5px;
    font-weight:500;
    color:var(--card-muted);
    text-decoration:line-through;
    white-space:nowrap;
}
/* The corner badge is the one place the discount is stated. */
body.bda-storefront .bda-price-off{display:none;}

@media (min-width: 600px){
    body.bda-storefront .mf-price-row{gap:2px 8px;}
    body.bda-storefront .mf-price-amount{font-size:18px;}
    body.bda-storefront .mf-old-price{font-size:13px;}
}
@media (min-width: 1024px){
    body.bda-storefront .mf-price-amount{font-size:19px;}
}

/* Veg / non-veg marker, pinned to the bottom-left of the image stage.
   The shape is declared here rather than in the page-scoped sheets, so it
   looks the same on the homepage, category, search and store listings. */
body.bda-storefront .mf-product-image .food-icon{
    position:absolute;
    left:calc(var(--card-pad) + 8px);
    bottom:calc(var(--card-pad) + 8px);
    z-index:2;
    display:inline-block;
    width:16px;
    height:16px;
    border:2px solid;
    border-radius:2px;
    background:#fff;
}
body.bda-storefront .mf-product-image .food-icon::after{
    content:'';
    position:absolute;
    top:50%;
    left:50%;
    width:8px;
    height:8px;
    border-radius:50%;
    transform:translate(-50%,-50%);
}
body.bda-storefront .mf-product-image .food-icon.veg{border-color:#008000;}
body.bda-storefront .mf-product-image .food-icon.veg::after{background:#008000;}
body.bda-storefront .mf-product-image .food-icon.nonveg{border-color:#d60000;}
body.bda-storefront .mf-product-image .food-icon.nonveg::after{background:#d60000;}

/* Delivery: one short muted line with a truck icon. The row is
   always present (blank when the product carries no delivery
   data) so the CTA below never moves between cards. */
/* A product with no delivery_timeline used to still reserve this row, which
   on a catalogue where none of them carry one left a permanent empty gap
   between the price and the button on every single card. It collapses now;
   the CTA still lines up across a row because .mf-card-actions is pushed
   down with margin-top:auto. */
body.bda-storefront .mf-delivery-line.is-empty{
    display:none;
}
body.bda-storefront .mf-delivery-line{
    display:flex;
    align-items:center;
    gap:5px;
    /* sits to the right of the stars, so it takes only the width it needs
       and gives the row's slack back to the rating */
    flex:0 0 auto;
    margin:0;
    font-size:11.5px;
    font-weight:500;
    color:var(--card-muted);
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
    min-width:0;
}
body.bda-storefront .mf-delivery-line .fa{
    flex:0 0 auto;
    color:var(--card-muted);
}
/* the optional "Free Delivery" line keeps its own row below the meta row */
body.bda-storefront .mf-delivery-line.alt{
    margin:0 0 8px;
    color:var(--card-success);
}
body.bda-storefront .mf-delivery-line.alt .fa{color:var(--card-success);}

@media (max-width: 599px){
    body.bda-storefront .mf-delivery-line.alt{display:none;}
}
@media (min-width: 1024px){
    body.bda-storefront .mf-delivery-line{font-size:12.5px;}
}

/* ----------------------------------------------------------
   6. ACTIONS
   margin-top:auto pins the CTA to the bottom of every card, so
   the buttons in a row line up no matter how much text sits
   above them.
   ---------------------------------------------------------- */
body.bda-storefront .mf-card-actions{
    margin-top:auto;
    min-width:0;
}
body.bda-storefront .mf-cart-inline{width:100%;min-width:0;}
body.bda-storefront .mf-cart-inline.is-loading{opacity:.65;pointer-events:none;}

body.bda-storefront .mf-btn-cart{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    width:100%;
    height:var(--card-btn-h);
    padding:0 10px;
    border:1px solid transparent;
    border-radius:10px;
    background:var(--card-orange);
    color:#fff;
    font-size:13px;
    font-weight:700;
    letter-spacing:.2px;
    line-height:1;
    text-align:center;
    text-decoration:none;
    text-transform:uppercase;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
    cursor:pointer;
    transition:background-color .2s ease;
}
body.bda-storefront .mf-btn-cart .fa{font-size:13px;flex:0 0 auto;}
body.bda-storefront .mf-btn-cart:hover,
body.bda-storefront .mf-btn-cart:focus{
    background:var(--card-orange-hover);
    color:#fff;
    text-decoration:none;
}
body.bda-storefront .mf-btn-cart:active{
    background:#c44d0d;
}
body.bda-storefront .mf-btn-cart:focus-visible{
    outline:3px solid var(--card-navy);
    outline-offset:2px;
}
body.bda-storefront .mf-btn-cart[disabled],
body.bda-storefront .mf-btn-cart:disabled{
    background:#f1f3f7;
    color:var(--card-muted);
    border-color:var(--card-line);
    cursor:not-allowed;
}

/* Out of stock: the CTA becomes a real "View product" link that
   still navigates - it is never a dead control. */
body.bda-storefront .mf-btn-cart.is-disabled{
    background:#f1f3f7;
    color:var(--card-navy);
    border-color:var(--card-line);
    font-weight:700;
}
body.bda-storefront .mf-btn-cart.is-disabled:hover,
body.bda-storefront .mf-btn-cart.is-disabled:focus{
    background:#e7ebf2;
    color:var(--card-navy);
}
body.bda-storefront .mf-product-inner.is-out .mf-product-image img{
    opacity:.6;
    filter:grayscale(.4);
}

/* qty stepper keeps exactly the footprint of the button it replaces */
body.bda-storefront .mf-qty-inline{
    display:flex;
    align-items:center;
    justify-content:space-between;
    width:100%;
    height:var(--card-btn-h);
    border:1px solid var(--card-orange);
    border-radius:10px;
    overflow:hidden;
    background:#fff;
}
body.bda-storefront .mf-qty-inline button{
    flex:0 0 42px;
    height:100%;
    border:0;
    background:var(--card-orange);
    color:#fff;
    font-size:18px;
    font-weight:800;
    line-height:1;
    cursor:pointer;
    transition:background-color .2s ease;
}
body.bda-storefront .mf-qty-inline button:hover{background:var(--card-orange-hover);}
body.bda-storefront .mf-qty-inline button:focus-visible{
    outline:3px solid var(--card-navy);
    outline-offset:-3px;
}
body.bda-storefront .mf-qty-inline .js-cart-qty-value{
    flex:1 1 auto;
    text-align:center;
    font-size:14px;
    font-weight:700;
    color:var(--card-navy);
}

/* ----------------------------------------------------------
   7. HOMEPAGE PRODUCT ROWS
   The rail used to scroll sideways at every width, which hid
   most of a section behind a gesture users had to discover.
   It is a plain responsive grid now - 2 columns on phones,
   3 on tablets, 4 from 1200px up - and "View All" carries the
   user to the complete category. The .bda-catrow-rail hook,
   its id and its data attributes are unchanged, so the
   progressive-loading script keeps working.
   ---------------------------------------------------------- */
body.bda-storefront .bda-catrow-rail{
    display:grid;
    grid-template-columns:repeat(2, minmax(0, 1fr));
    gap:12px;
    align-items:stretch;
    width:100%;
    max-width:100%;
    min-width:0;
    /* the old rail was a horizontal scroller; make sure no
       leftover scroll state survives on this element */
    overflow:visible;
    padding:0;
}
body.bda-storefront .bda-catrow-rail .mf-product-card,
body.bda-storefront .bda-catrow-skeleton{
    flex:none;
    width:100%;
    max-width:100%;
    min-width:0;
    padding:0;
}

@media (min-width: 600px){
    body.bda-storefront .bda-catrow-rail{
        grid-template-columns:repeat(3, minmax(0, 1fr));
        gap:14px;
    }
}
@media (min-width: 992px){
    body.bda-storefront .bda-catrow-rail{
        grid-template-columns:repeat(4, minmax(0, 1fr));
        gap:16px;
    }
}
/* Capped at five. Most homepage rows hold exactly five products, so a sixth
   column would leave a permanent empty slot on the right of every row. */
@media (min-width: 1280px){
    body.bda-storefront .bda-catrow-rail{
        grid-template-columns:repeat(5, minmax(0, 1fr));
        gap:18px;
    }
}

/* A grid cannot be scrolled sideways, so the edge arrows have
   nothing to do - home-category-rows.js keeps them hidden and
   this makes that permanent. */
body.bda-storefront .bda-catrow-nav{display:none;}

/* skeleton placeholder roughly matches the real card footprint
   (square image stage + the info block below it) */
body.bda-storefront .bda-catrow-skeleton{
    min-height:340px;
}

/* ----------------------------------------------------------
   8. SAFETY
   Nothing in a product list may push the page sideways.
   ---------------------------------------------------------- */
body.bda-storefront .bda-product-grid,
body.bda-storefront .bda-product-grid *,
body.bda-storefront .bda-catrow-rail,
body.bda-storefront .bda-catrow-rail *{
    max-width:100%;
}

/* ==========================================================
   SHARED BREADCRUMB + GLOBAL FOCUS RING
   ----------------------------------------------------------
   Breadcrumbs used to exist only on product / combo / store
   pages. inc/breadcrumb.php now renders the same markup on
   category, section and search too, styled from here.
   ========================================================== */
body.bda-storefront .bda-breadcrumb{
    display:flex;
    align-items:center;
    flex-wrap:wrap;
    gap:4px 6px;
    margin:0 0 14px;
    font-size:12.5px;
    color:var(--bda-muted, #5c6b80);
    min-width:0;
}
body.bda-storefront .bda-breadcrumb a{
    color:var(--bda-navy, #0b2545);
    font-weight:600;
    text-decoration:none;
}
body.bda-storefront .bda-breadcrumb a:hover{
    color:var(--bda-orange, #f26a1b);
    text-decoration:underline;
}
body.bda-storefront .bda-breadcrumb-sep{color:#9aa6b5;}
body.bda-storefront .bda-breadcrumb-current{
    color:var(--bda-muted, #5c6b80);
    min-width:0;
    max-width:100%;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
}

/* Phones: the current page name gets its own full-width line and truncates
   there, instead of running off the right edge.

   Deliberately NOT applied to .amz-product-page - that page turns its
   breadcrumb into a horizontal scroll strip on mobile (product-redesign.css
   ~1146: flex-wrap:nowrap + overflow-x:auto). Forcing a wrap there fought that
   design and made the scroll area wider than it needed to be. */
@media (max-width: 599px){
    body.bda-storefront .bda-breadcrumb-current{
        flex:1 1 100%;
        max-width:100%;
    }
}

/* ----------------------------------------------------------
   Keyboard focus ring, site-wide. main.css defined none at all,
   so tabbing through the storefront gave no visible position.
   :focus-visible keeps it off for mouse clicks.
   ---------------------------------------------------------- */
body.bda-storefront a:focus-visible,
body.bda-storefront button:focus-visible,
body.bda-storefront input:focus-visible,
body.bda-storefront select:focus-visible,
body.bda-storefront textarea:focus-visible,
body.bda-storefront [tabindex]:not([tabindex="-1"]):focus-visible{
    outline:3px solid var(--bda-orange, #f26a1b);
    outline-offset:2px;
    border-radius:4px;
}