/*
╔══════════════════════════════════════════════════════════╗
║    SHOPLITE — style.css                               ║
║                                                          ║
║   BASIC EXERCISES (change a value):                      ║
║   EX 1 — Change the page background colour  → line ~40  ║
║   EX 2 — Change the accent / button colour  → line ~58  ║
║   EX 3 — Change the hero background colour  → line ~102 ║
║   EX 4 — Change the hero headline size      → line ~113 ║
║   EX 5 — Change product card corner radius  → line ~192 ║
║   EX 6 — Change the button hover colour     → line ~160 ║
║   EX 7 — Change the footer background       → line ~305 ║
║                                                          ║
║   NEW CHALLENGES (write the CSS rule yourself!):         ║
║   CH A — Style the active nav button        → line ~95  ║
║   CH B — Style the active category tab      → line ~230 ║
║   CH C — Make the product grid layout       → line ~245 ║
║   CH D — Make the stats bar horizontal      → line ~155 ║
║   CH E — Add a card hover lift effect       → line ~270 ║
║                                                          ║
║   OUTLINE CHALLENGES (write new CSS rules):              ║
║   CH 1 — Add an outline to product cards    → line ~285 ║
║   CH 2 — Add a glowing outline on hover     → line ~302 ║
║   CH 3 — Add a focus outline to buttons     → line ~320 ║
║   CH 4 — Add a badge to a product card      → line ~338 ║
║   CH 5 — Make the cart item flash green     → line ~365 ║
║                                                          ║
║   OUTLINE vs BORDER — what's the difference?            ║
║     border:  takes up space, part of the box size       ║
║     outline: drawn OUTSIDE the box, takes NO space      ║
║     outline-offset: how far the outline sits from edge  ║
╚══════════════════════════════════════════════════════════╝
*/


/* ── Reset ── */
* { margin: 0; padding: 0; box-sizing: border-box; }

/* ════════════════════════════════════
  EX 1 — Change the page background colour 🎨
  Try:
    #f0ede7  → warm cream  (current)
    #f8fafc  → light grey
    #0f1f3d  → dark navy
════════════════════════════════════ */
body {
  font-family: Arial, sans-serif;
  background: #f8fafc;     /* ✏️ change this */
  color: #111;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}


/* ── NAVBAR ── */
.navbar {
  background: #0f1f3d;
  padding: 14px 32px;
  display: flex;
  align-items: center;
  gap: 20px;
}

.nav-logo {
  font-size: 20px;
  font-weight: bold;
  color: white;
  margin-right: auto;
}

/* ════════════════════════════════════
  EX 2 — Change the accent / button colour 🌈
  This colour shows on: store name, buttons,
  prices, active tabs, checkout button.
  Try:
    #16a34a  → green   (current)
    #f97316  → orange
    #6366f1  → purple
    #3b82f6  → blue
  Change ALL values below so they match!
════════════════════════════════════ */
.nav-logo span { color: #f6513b; }      /* ✏️ change this */

.nav-buttons   { display: flex; gap: 8px; }

.nav-btn {
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.15);
  color: #ccc;
  padding: 7px 16px;
  border-radius: 8px;
  cursor: pointer;
  font-size: 13px;
  font-family: Arial, sans-serif;
}

/* ════════════════════════════════════
  CH A — Style the active nav button 🟢
  When a nav button is active (.nav-btn.active),
  it should stand out from the others.

  YOUR TASK: Write a CSS rule for .nav-btn.active
  that sets:
    background   → use your accent colour (e.g. #16a34a)
    border-color → same accent colour
    color        → white
    font-weight  → bold

  HINT: The selector is  .nav-btn.active { }
  Look at .nav-btn above for property name examples.
════════════════════════════════════ */
/* ✏️ Write .nav-btn.active { } here */
.nav-btn.active {
     background: #2b3744;
     border-color:#2b3744 
     color(white);
     font-weight: bold;
}

.cart-icon  { color: white; font-size: 18px; cursor: pointer; }

.cart-badge {
  background: #ef4444;
  color: white;
  font-size: 11px;
  font-weight: bold;
  padding: 2px 7px;
  border-radius: 20px;
  margin-left: 4px;
}


/* ── Show / hide screens ── */
.screen        { display: none; flex-direction: column; flex: 1; }
.screen.active { display: flex; }


/* ════════════════════════════════════
   SCREEN 1 — HERO
════════════════════════════════════ */

/* ════════════════════════════════════
  EX 3 — Change the hero background colour 🎨
  Try:
    #0f1f3d  → dark navy     (current)
    #1e1b4b  → deep indigo
    #14532d  → forest green
════════════════════════════════════ */
.hero {
  background: #0f1f3d;    /* ✏️ change this */
  color: white;
  padding: 60px;
  flex: 1;
}

/* ════════════════════════════════════
  EX 4 — Change the hero headline size 🔠
  Try:  36px  (smaller)  or  80px  (larger)
════════════════════════════════════ */
.hero-title {
  font-size: 67px;        /* ✏️ change this */
  font-weight: 800;
  line-height: 1.1;
  margin-bottom: 20px;
}

.hero-title em { font-style: italic; color: #fbbf24; }

.hero-sub {
  font-size: 17px;
  color: rgba(255,255,255,0.55);
  line-height: 1.65;
  margin-bottom: 32px;
  max-width: 440px;
}

/* ════════════════════════════════════
  CH D — Make the stats bar display horizontally 📊
  Right now the stats stack on top of each other.
  YOUR TASK: Write a CSS rule for .stats-bar that
  makes its children sit side by side.

  Properties to add:
    display: flex;
    gap: 40px;
    margin-top: 48px;
    padding-top: 32px;
    border-top: 1px solid rgba(255,255,255,0.1);

  HINT: The selector is  .stats-bar { }
════════════════════════════════════ */
.stats-bar {
  /* ✏️ Add display: flex and the other properties here */
  display: flex;
  gap: 40px;
  margin-top: 48px;
  padding-top: 32px;
  border-top: 1px solid rgba(255,255,255,0.1);
}

.stat strong { display: block; font-size: 26px; font-weight: 800; color: white; }
.stat span   { font-size: 11px; color: rgba(255,255,255,0.4); margin-top: 3px; display: block; }


/* ── Shared button ── */
.btn {
  background: #16a34a;
  color: white;
  border: none;
  border-radius: 12px;
  padding: 14px 28px;
  font-size: 15px;
  font-weight: bold;
  cursor: pointer;
  font-family: Arial, sans-serif;
  display: inline-block;
}

/* ════════════════════════════════════
  EX 6 — Change the button hover colour 🖱️
  Use a darker shade of your EX 2 colour.
    #15803d  → darker green  (current)
    #ea6c0c  → darker orange
    #4f46e5  → darker purple
════════════════════════════════════ */
.btn:hover  { background: #147a3a; }    /* ✏️ change this */
.btn-full   { width: 100%; text-align: center; margin-top: 16px; padding: 18px; font-size: 16px; }


/* ── Page header ── */
.page-header {
  background: white;
  border-bottom: 1px solid #e5e7eb;
  padding: 24px 40px;
}

.page-header h2 { font-size: 22px; font-weight: 800; }
.page-header p  { color: #6b7280; margin-top: 4px; font-size: 14px; }


/* ════════════════════════════════════
   SCREEN 2 — PRODUCTS
════════════════════════════════════ */

.tabs {
  display: flex;
  gap: 8px;
  padding: 16px 40px;
  background: white;
  border-bottom: 1px solid #e5e7eb;
}

.tab {
  background: #f3f4f6;
  border: 1.5px solid #e5e7eb;
  border-radius: 20px;
  padding: 7px 18px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  color: #374151;
  font-family: Arial, sans-serif;
  transition: all 0.15s;
}

.tab:hover  { background: #e5e7eb; }

/* ════════════════════════════════════
  CH B — Style the active category tab 🗂️
  When a tab is active (.tab.active), it should
  look selected — dark background, white text.

  YOUR TASK: Write a CSS rule for .tab.active that sets:
    background   → #0f1f3d  (dark navy)
    color        → white
    border-color → #0f1f3d

  HINT: The selector is  .tab.active { }
  Look at .tab above for property name examples.
════════════════════════════════════ */
/* ✏️ Write .tab.active { } here */
 .tab.active {
   background: #0f1f3d  (dark navy);
    color :  white ;
    border-color: #0f1f3d ;
  }

/* ════════════════════════════════════
  CH C — Make the product grid layout 🏗️
  Right now all product cards stack in one column.
  YOUR TASK: Write a CSS rule for .product-grid that
  creates a 4-column grid layout.

  Properties to add:
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    padding: 24px 40px 40px;

  HINT: The selector is  .product-grid { }
  display: grid  turns on CSS Grid.
  repeat(4, 1fr) means: 4 equal-width columns.
════════════════════════════════════ */
.product-grid {
  /* ✏️ Add the grid properties here */
  display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    padding: 24px 40px 40px;

}

/* ════════════════════════════════════
  EX 5 — Change product card corner radius 🟦
  Try:  4px  (square corners)  or  20px  (very rounded)
════════════════════════════════════ */
.prod-card {
  background: white;
  border-radius: 16px;      /* ✏️ change this */
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0,0,0,0.07);
  transition: transform 0.2s, box-shadow 0.2s, outline 0.2s;
  position: relative;       /* needed for CH 4 badge */
}

/* ════════════════════════════════════
  CH E — Add a hover lift effect to product cards 🃏
  Right now nothing happens when you hover a card.
  YOUR TASK: Write a CSS rule for .prod-card:hover
  that makes the card lift up and cast a shadow.

  Properties to add:
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(0,0,0,0.12);

  HINT: The selector is  .prod-card:hover { }
  translateY(-4px) moves the element 4px upward.
  The transition on .prod-card will make it smooth!
════════════════════════════════════ */
/* ✏️ Write .prod-card:hover { } here */
 .prod-card:hover { 
  transform: translateY(4px);
  box-shadow: 0 8px 24px rgba(0,0,0,0.12)} 

/* ══════════════════════════════════════════════
   ⚡ CHALLENGE SECTION — CSS OUTLINE & MORE
   Read each challenge carefully before writing.
   Write your CSS rules in the spaces provided.
══════════════════════════════════════════════ */


/* ════════════════════════════════════
  CH 1 — Add a solid outline to ALL product cards 🖊️

  WHAT IS outline?
    outline is drawn OUTSIDE the element's border.
    Unlike border, it does NOT push other elements away.
    It takes NO space in the layout.

  SYNTAX:
    outline: [width] [style] [colour];
    Example:  outline: 2px solid #16a34a;

  Styles you can use:  solid | dashed | dotted | double

  YOUR TASK:
    Add a 2px solid outline to .prod-card using your accent colour.
    It should look like:  outline: 2px solid #16a34a;

  ✏️ Write your rule inside .prod-card below:
════════════════════════════════════ */
/* .prod-card {
    ✏️ add your outline rule here
} */
.prod-card { 
  outline: 2px solid #16a34a;
}

/* ════════════════════════════════════
  CH 2 — Make the outline GLOW when hovering 🌟

  WHAT IS outline-offset?
    outline-offset pushes the outline away from the element's edge.
    Example:  outline-offset: 4px;  gives a small gap between the card and the outline.

  WHAT IS box-shadow for glow?
    You can make a colour glow using:
    box-shadow: 0 0 0 4px rgba(22, 163, 74, 0.25);
    This creates a soft green ring around the card.

  YOUR TASK:
    When a product card is hovered (.prod-card:hover), add:
      1.  outline: 3px solid #16a34a;
      2.  outline-offset: 3px;
      3.  box-shadow: 0 0 0 6px rgba(22, 163, 74, 0.15);

  ✏️ Write your rules inside .prod-card:hover below:
════════════════════════════════════ */
/* .prod-card:hover {
    ✏️ add your outline + outline-offset + box-shadow here
} */
  .prod-card:hover {
    outline: 3px solid #16a34a;
    outline-offset: 3px;
    box-shadow: 0 0 0 6px rgba(22, 163, 74, 0.15);
  }

/* ════════════════════════════════════
  CH 3 — Outline the "Add to Cart" button when focused 🔍

  WHAT IS :focus?
    When a user clicks a button OR tabs to it with the keyboard,
    the element gets a :focus state.
    Browsers add a default blue outline — we can customise it.

  WHAT IS outline: none?
    Many developers remove the default outline:
      outline: none;   ← hides it
    But this is BAD for accessibility — keyboard users
    can't see where they are on the page!

  YOUR TASK:
    Style .prod-add:focus so keyboard users can see it clearly.
    Add these rules:
      outline: 3px dashed #16a34a;
      outline-offset: 3px;

  ✏️ Write your rule below:
════════════════════════════════════ */
/* .prod-add:focus {
    ✏️ add your outline rules here
} */
 .prod-add:focus {
  outline: 3px dashed #16a34a;
  outline-offset: 3px;
 }

/* ════════════════════════════════════
  CH 4 — Add a "NEW" badge to the first product card 🏷️

  HOW BADGES WORK IN CSS:
    Use  position: absolute  to place an element
    exactly where you want it inside its parent.
    The parent (.prod-card) already has  position: relative.

    Step 1 — In index.html: add a <span class="badge">NEW</span>
             inside the first .prod-card, above <div class="prod-img">

    Step 2 — Style it here:

    .badge {
      position: absolute;   ← takes it out of normal flow
      top: 10px;            ← 10px from the top of the card
      left: 10px;           ← 10px from the left
      background: #ef4444;  ← red background
      color: white;
      font-size: 11px;
      font-weight: bold;
      padding: 4px 10px;
      border-radius: 20px;
      z-index: 1;           ← sits on top of everything
    }

  YOUR TASK:
    1. Add <span class="badge">NEW</span> to ONE product card in index.html
    2. Write the .badge rule below using the example above.
       Try changing the colour, position, or border-radius!

  ✏️ Write your .badge rule below:
════════════════════════════════════ */
/* ✏️ Write .badge { } here */
.badge {
  position: absolute;  
      top: 10px;          
      left: 10px;          
      background: #ef4444;  
      color: white;
      font-size: 11px;
      font-weight: bold;
      padding: 4px 10px;
      border-radius: 20px;
      z-index: 1;
}

/* ════════════════════════════════════
  CH 5 — Animate the cart item when it appears 💫

  WHAT IS @keyframes?
    @keyframes lets you define an animation step by step.
    Then you attach it to an element using  animation: name duration.

  EXAMPLE — a simple fade-in:
    @keyframes fadeIn {
      from { opacity: 0; transform: translateX(-10px); }
      to   { opacity: 1; transform: translateX(0); }
    }

  YOUR TASK:
    Step 1 — Write a @keyframes rule called  slideIn  that:
               starts with:  opacity: 0  and  translateX(-12px)
               ends with:    opacity: 1  and  translateX(0)

    Step 2 — Apply it to .cart-item:
               animation: slideIn 0.3s ease;

  ✏️ Write your @keyframes and .cart-item animation below:
════════════════════════════════════ */
/* ✏️ Write @keyframes slideIn { } here */
@keyframes slideIn { 
     from { opacity: 0; transform: translateX(-12px); }
      to   { opacity: 1; transform: translateX(0); }
} 
/* ✏️ Then write .cart-item { animation: ... } here */
.cart-item { animation:lideIn 0.3s ease}

/* ─── back to regular styles ─── */

.prod-img { width: 100%; height: 180px; overflow: hidden; background: #f3f4f6; }
.prod-img img { width: 100%; height: 100%; object-fit: cover; display: block; }

.prod-body    { padding: 14px 16px 16px; }
.prod-name    { font-size: 14px; font-weight: 700; margin-bottom: 4px; }
.prod-price   { font-size: 16px; font-weight: 800; color: #16a34a; margin-bottom: 12px; }

.prod-add {
  width: 100%;
  background: #0f1f3d;
  color: white;
  border: none;
  border-radius: 10px;
  padding: 10px 0;
  font-size: 13px;
  font-weight: bold;
  cursor: pointer;
  font-family: Arial, sans-serif;
  transition: background 0.2s;
}

/* ════════════════════════════════════
  BONUS — Style the "Add to Cart" button states 🎨
  Right now the button looks the same when hovered or added.

  YOUR TASK:
    1. Write .prod-add:hover { } — darker navy on hover
         Suggested: background: #1a2f55;
    2. Write .prod-add.added { } — green when item is added
         Suggested: background: #16a34a;
       (script.js adds the .added class automatically!)

  ✏️ Write the two rules below:
════════════════════════════════════ */
/* ✏️ Write .prod-add:hover { } here */
.prod-add:hover { 
  background: #1a2f55;
} 
/* ✏️ Write .prod-add.added { } here */
.prod-add.addded {
  background: #16a34a;
}
/* ════════════════════════════════════
   SCREEN 3 — CART
════════════════════════════════════ */
.cart-layout {
  display: grid;
  grid-template-columns: 1fr 360px;
  gap: 28px;
  padding: 28px 40px;
  align-items: start;
}

.cart-items-col { display: flex; flex-direction: column; gap: 12px; }

.cart-item {
  background: white;
  border-radius: 14px;
  padding: 16px 20px;
  display: flex;
  align-items: center;
  gap: 14px;
  box-shadow: 0 1px 4px rgba(0,0,0,0.06);
  /* CH 5 animation will go here */
}

.ci-thumb { width: 64px; height: 64px; border-radius: 10px; overflow: hidden; flex-shrink: 0; background: #f3f4f6; }
.ci-thumb img { width: 100%; height: 100%; object-fit: cover; }

.ci-info  { flex: 1; }
.ci-name  { font-size: 15px; font-weight: 700; margin-bottom: 4px; }
.ci-price { font-size: 14px; font-weight: 700; color: #16a34a; }

.remove-btn {
  background: none;
  border: 1px solid #e5e7eb;
  border-radius: 9px;
  padding: 7px 12px;
  font-size: 13px;
  cursor: pointer;
  color: #6b7280;
  transition: all 0.15s;
  font-family: Arial, sans-serif;
}

.remove-btn:hover { background: #fee2e2; border-color: #fca5a5; color: #dc2626; }

.empty-cart  { background: white; border-radius: 14px; padding: 60px 20px; text-align: center; box-shadow: 0 2px 8px rgba(0,0,0,0.06); }
.empty-icon  { font-size: 64px; margin-bottom: 16px; }
.empty-title { font-size: 20px; font-weight: 700; margin-bottom: 8px; }
.empty-sub   { font-size: 14px; color: #6b7280; margin-bottom: 24px; }

.cart-summary { background: white; border-radius: 16px; padding: 24px; box-shadow: 0 2px 8px rgba(0,0,0,0.06); position: sticky; top: 20px; }
.cart-summary h3 { font-size: 16px; font-weight: 800; margin-bottom: 20px; }

.summary-row {
  display: flex;
  justify-content: space-between;
  font-size: 14px;
  color: #4b5563;
  padding: 8px 0;
  border-bottom: 1px solid #f3f4f6;
}

.summary-row.total-row {
  font-size: 18px;
  font-weight: 800;
  color: #111;
  border-bottom: none;
  margin-top: 8px;
  padding-top: 14px;
}

.free { color: #16a34a; font-weight: 600; }


/* ════════════════════════════════════
  EX 7 — Change the footer background 🎨
  Try:  #0f1f3d  (navy)  |  #111  (black)  |  #16a34a  (green)
════════════════════════════════════ */
.footer {
  background: #0b182f;    /* ✏️ change this */
  color: rgba(255,255,255,0.4);
  text-align: center;
  padding: 24px;
  font-size: 13px;
  margin-top: auto;
}