#fw-section-instagram-feed-4df9a63a-6be5-4262-b1ff-ae655ac72441 {

/*
 * CSS to apply borders and styling, and resolve display issues for media.
 * PROFESSIONAL ENHANCEMENTS:
 * 1. Softened the borders and shadows on images for a cleaner look.
 * 2. Kept essential fixes like object-fit: cover and outline removal.
 */

/* ========================================================================= */
/* --- 1. Focus Outline Removal (Standard Professional Best Practice) --- */
/* Targets links, buttons, and video elements to remove the distracting default focus ring */
a:focus, button:focus, video:focus, [tabindex="-1"]:focus {
    outline: none !important; 
    box-shadow: none !important; 
}

/* ========================================================================= */
/* --- 2. Image Styles (Social Media Video Previews) --- */

img {
    /* PROFESSIONAL BORDER: Reduced thickness and moved to a subtle frame. */
    border: 2px solid #E0E0E0; /* Light gray border for a subtle frame effect */
    border-radius: 8px; /* Slightly reduced rounding */
    
    /* PROFESSIONAL SHADOW: Replaced heavy shadow with a minimal, modern lift */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); 
    
    padding: 0;
    margin: 10px;
    box-sizing: border-box;
    
    /* Fix for "black sections" (Aspect Ratio) - Essential for professional display */
    width: 100%;
    height: 100%;
    object-fit: cover; 
    display: block;
}

/* ========================================================================= */
/* --- 3. EXCLUDE Play Buttons (TikTok/YouTube Icons) --- */
/* Keeps small icons clean by removing the subtle border/shadow intended for thumbnails. */
img[src*="tk_icon.png"],
img[src*="yt_icon.png"] {
    border: none !important; 
    box-shadow: none !important; 
    margin: 0; 
    width: auto; 
    height: auto;
    object-fit: initial; 
}

/* ========================================================================= */
/* --- 4. Native Video Styles (e.g., Livestream Webcams) --- */
video {
    /* Applied same soft border and shadow to native video elements for consistency */
    border: 2px solid #E0E0E0; 
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); 
    
    /* Fix for "black sections" (Aspect Ratio) - Essential for professional display */
    width: 100%;
    object-fit: cover; 
    display: block;
}
}
#fw-section-recent-videos-b564039a-6e61-4540-9c2d-f13f57d4a01d {

/*
 * CSS to apply borders and styling, and resolve display issues for media.
 * PROFESSIONAL ENHANCEMENTS:
 * 1. Softened the borders and shadows on images for a cleaner look.
 * 2. Kept essential fixes like object-fit: cover and outline removal.
 */

/* ========================================================================= */
/* --- 1. Focus Outline Removal (Standard Professional Best Practice) --- */
/* Targets links, buttons, and video elements to remove the distracting default focus ring */
a:focus, button:focus, video:focus, [tabindex="-1"]:focus {
    outline: none !important; 
    box-shadow: none !important; 
}

/* ========================================================================= */
/* --- 2. Image Styles (Social Media Video Previews) --- */

img {
    /* PROFESSIONAL BORDER: Reduced thickness and moved to a subtle frame. */
    border: 2px solid #E0E0E0; /* Light gray border for a subtle frame effect */
    border-radius: 8px; /* Slightly reduced rounding */
    
    /* PROFESSIONAL SHADOW: Replaced heavy shadow with a minimal, modern lift */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); 
    
    padding: 0;
    margin: 10px;
    box-sizing: border-box;
    
    /* Fix for "black sections" (Aspect Ratio) - Essential for professional display */
    width: 100%;
    height: 100%;
    object-fit: cover; 
    display: block;
}

/* ========================================================================= */
/* --- 3. EXCLUDE Play Buttons (TikTok/YouTube Icons) --- */
/* Keeps small icons clean by removing the subtle border/shadow intended for thumbnails. */
img[src*="tk_icon.png"],
img[src*="yt_icon.png"] {
    border: none !important; 
    box-shadow: none !important; 
    margin: 0; 
    width: auto; 
    height: auto;
    object-fit: initial; 
}

/* ========================================================================= */
/* --- 4. Native Video Styles (e.g., Livestream Webcams) --- */
video {
    /* Applied same soft border and shadow to native video elements for consistency */
    border: 2px solid #E0E0E0; 
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); 
    
    /* Fix for "black sections" (Aspect Ratio) - Essential for professional display */
    width: 100%;
    object-fit: cover; 
    display: block;
}
}













#fw-section-header {
--color-primary: #632CFF;
--color-primary-rgb: 99, 44, 255;
--color-background: #ffb6b6;
--color-background-rgb: 255, 182, 182;
--color-on-primary: #F9F8FF;
--color-on-primary-rgb: 249, 248, 255;
--color-on-background: #9b185d;
--color-on-background-rgb: 155, 24, 93;
--color-product-image-background: #9b185d;
--color-background-brightness: 204;
background-color: var(--color-background);
color: var(--color-on-background);

}

#fw-section-image-32cc40f4-2a2e-47c4-8a64-d13cf74df8d6 {

/*
 * CSS to apply borders and styling, and resolve display issues for media.
 * PROFESSIONAL ENHANCEMENTS:
 * 1. Softened the borders and shadows on images for a cleaner look.
 * 2. Kept essential fixes like object-fit: cover and outline removal.
 */

/* ========================================================================= */
/* --- 1. Focus Outline Removal (Standard Professional Best Practice) --- */
/* Targets links, buttons, and video elements to remove the distracting default focus ring */
a:focus, button:focus, video:focus, [tabindex="-1"]:focus {
    outline: none !important; 
    box-shadow: none !important; 
}

/* ========================================================================= */
/* --- 2. Image Styles (Social Media Video Previews) --- */

img {
    /* PROFESSIONAL BORDER: Reduced thickness and moved to a subtle frame. */
    border: 2px solid #E0E0E0; /* Light gray border for a subtle frame effect */
    border-radius: 8px; /* Slightly reduced rounding */
    
    /* PROFESSIONAL SHADOW: Replaced heavy shadow with a minimal, modern lift */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); 
    
    padding: 0;
    margin: 10px;
    box-sizing: border-box;
    
    /* Fix for "black sections" (Aspect Ratio) - Essential for professional display */
    width: 100%;
    height: 100%;
    object-fit: cover; 
    display: block;
}

/* ========================================================================= */
/* --- 3. EXCLUDE Play Buttons (TikTok/YouTube Icons) --- */
/* Keeps small icons clean by removing the subtle border/shadow intended for thumbnails. */
img[src*="tk_icon.png"],
img[src*="yt_icon.png"] {
    border: none !important; 
    box-shadow: none !important; 
    margin: 0; 
    width: auto; 
    height: auto;
    object-fit: initial; 
}

/* ========================================================================= */
/* --- 4. Native Video Styles (e.g., Livestream Webcams) --- */
video {
    /* Applied same soft border and shadow to native video elements for consistency */
    border: 2px solid #E0E0E0; 
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); 
    
    /* Fix for "black sections" (Aspect Ratio) - Essential for professional display */
    width: 100%;
    object-fit: cover; 
    display: block;
}
}
#fw-section-recent-tiktoks-aa9b2002-6129-4083-9420-d85ae891b328 {

/*
 * CSS to apply borders and styling, and resolve display issues for media.
 * PROFESSIONAL ENHANCEMENTS:
 * 1. Softened the borders and shadows on images for a cleaner look.
 * 2. Kept essential fixes like object-fit: cover and outline removal.
 */

/* ========================================================================= */
/* --- 1. Focus Outline Removal (Standard Professional Best Practice) --- */
/* Targets links, buttons, and video elements to remove the distracting default focus ring */
a:focus, button:focus, video:focus, [tabindex="-1"]:focus {
    outline: none !important; 
    box-shadow: none !important; 
}

/* ========================================================================= */
/* --- 2. Image Styles (Social Media Video Previews) --- */

img {
    /* PROFESSIONAL BORDER: Reduced thickness and moved to a subtle frame. */
    border: 2px solid #E0E0E0; /* Light gray border for a subtle frame effect */
    border-radius: 8px; /* Slightly reduced rounding */
    
    /* PROFESSIONAL SHADOW: Replaced heavy shadow with a minimal, modern lift */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); 
    
    padding: 0;
    margin: 10px;
    box-sizing: border-box;
    
    /* Fix for "black sections" (Aspect Ratio) - Essential for professional display */
    width: 100%;
    height: 100%;
    object-fit: cover; 
    display: block;
}

/* ========================================================================= */
/* --- 3. EXCLUDE Play Buttons (TikTok/YouTube Icons) --- */
/* Keeps small icons clean by removing the subtle border/shadow intended for thumbnails. */
img[src*="tk_icon.png"],
img[src*="yt_icon.png"] {
    border: none !important; 
    box-shadow: none !important; 
    margin: 0; 
    width: auto; 
    height: auto;
    object-fit: initial; 
}

/* ========================================================================= */
/* --- 4. Native Video Styles (e.g., Livestream Webcams) --- */
video {
    /* Applied same soft border and shadow to native video elements for consistency */
    border: 2px solid #E0E0E0; 
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); 
    
    /* Fix for "black sections" (Aspect Ratio) - Essential for professional display */
    width: 100%;
    object-fit: cover; 
    display: block;
}
}



#fw-section-video-9b54c834-6f28-4433-a712-a40820cc7493 {

/*
 * CSS to apply borders and styling, and resolve display issues for media.
 * PROFESSIONAL ENHANCEMENTS:
 * 1. Softened the borders and shadows on images for a cleaner look.
 * 2. Kept essential fixes like object-fit: cover and outline removal.
 */

/* ========================================================================= */
/* --- 1. Focus Outline Removal (Standard Professional Best Practice) --- */
/* Targets links, buttons, and video elements to remove the distracting default focus ring */
a:focus, button:focus, video:focus, [tabindex="-1"]:focus {
    outline: none !important; 
    box-shadow: none !important; 
}

/* ========================================================================= */
/* --- 2. Image Styles (Social Media Video Previews) --- */

img {
    /* PROFESSIONAL BORDER: Reduced thickness and moved to a subtle frame. */
    border: 2px solid #E0E0E0; /* Light gray border for a subtle frame effect */
    border-radius: 8px; /* Slightly reduced rounding */
    
    /* PROFESSIONAL SHADOW: Replaced heavy shadow with a minimal, modern lift */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); 
    
    padding: 0;
    margin: 10px;
    box-sizing: border-box;
    
    /* Fix for "black sections" (Aspect Ratio) - Essential for professional display */
    width: 100%;
    height: 100%;
    object-fit: cover; 
    display: block;
}

/* ========================================================================= */
/* --- 3. EXCLUDE Play Buttons (TikTok/YouTube Icons) --- */
/* Keeps small icons clean by removing the subtle border/shadow intended for thumbnails. */
img[src*="tk_icon.png"],
img[src*="yt_icon.png"] {
    border: none !important; 
    box-shadow: none !important; 
    margin: 0; 
    width: auto; 
    height: auto;
    object-fit: initial; 
}

/* ========================================================================= */
/* --- 4. Native Video Styles (e.g., Livestream Webcams) --- */
video {
    /* Applied same soft border and shadow to native video elements for consistency */
    border: 2px solid #E0E0E0; 
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); 
    
    /* Fix for "black sections" (Aspect Ratio) - Essential for professional display */
    width: 100%;
    object-fit: cover; 
    display: block;
}
}

#fw-section-video-08483ea2-6f9f-4198-9a06-2217c64c4192 {

/*
 * CSS to apply borders and styling, and resolve display issues for media.
 * PROFESSIONAL ENHANCEMENTS:
 * 1. Softened borders and shadows (using light gray #E0E0E0).
 * 2. Improved typography and color contrast for better readability.
 * 3. Used #9B185D as a consistent accent color.
 */

/* ========================================================================= */
/* --- 0. PROFESSIONAL TYPOGRAPHY AND COLOR --- */
/* Apply a standard, highly-readable font and improve text color contrast. */
body {
    font-family: 'Inter', sans-serif; /* A clean, modern sans-serif font */
    color: #333333; /* Dark gray for soft, easy-on-the-eyes body text */
    line-height: 1.6; /* Increased line height for better readability */
}

/* Headings for a stronger hierarchy */
h2, h3 {
    color: #111111; /* Near-black for maximum impact on titles */
    border-bottom: 1px solid #EEEEEE; /* Subtle separator line */
    padding-bottom: 8px;
    margin-top: 35px; /* Added spacing above new sections */
    margin-bottom: 15px;
}

/* Links and Interactive Elements - Using brand color as an ACCENT */
a {
    color: #9B185D; /* Use the brand's accent color for all links */
    text-decoration: none;
    transition: color 0.2s ease;
}

a:hover {
    color: #CC3388; /* Slightly lighter shade for a smooth hover effect */
    text-decoration: underline;
}


/* ========================================================================= */
/* --- 1. Focus Outline Removal (Standard Professional Best Practice) --- */
/* Targets links, buttons, and video elements to remove the distracting default focus ring */
a:focus, button:focus, video:focus, [tabindex="-1"]:focus {
    outline: none !important; 
    box-shadow: none !important; 
}

/* ========================================================================= */
/* --- 2. Image Styles (Social Media Video Previews) --- */

img {
    /* PROFESSIONAL BORDER: Reduced thickness and moved to a subtle frame. */
    border: 2px solid #E0E0E0; /* Light gray border for a subtle frame effect */
    border-radius: 8px; /* Slightly reduced rounding */
    
    /* PROFESSIONAL SHADOW: Replaced heavy shadow with a minimal, modern lift */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); 
    
    padding: 0;
    margin: 10px;
    box-sizing: border-box;
    
    /* Fix for "black sections" (Aspect Ratio) - Essential for professional display */
    width: 100%;
    height: 100%;
    object-fit: cover; 
    display: block;
}

/* ========================================================================= */
/* --- 3. EXCLUDE Play Buttons (TikTok/YouTube Icons) --- */
/* Keeps small icons clean by removing the subtle border/shadow intended for thumbnails. */
img[src*="tk_icon.png"],
img[src*="yt_icon.png"] {
    border: none !important; 
    box-shadow: none !important; 
    margin: 0; 
    width: auto; 
    height: auto;
    object-fit: initial; 
}

/* ========================================================================= */
/* --- 4. Native Video Styles (e.g., Livestream Webcams) --- */
video {
    /* Applied same soft border and shadow to native video elements for consistency */
    border: 2px solid #E0E0E0; 
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); 
    
    /* Fix for "black sections" (Aspect Ratio) - Essential for professional display */
    width: 100%;
    object-fit: cover; 
    display: block;
}

/* ========================================================================= */
/* --- 5. COUNTDOWN TIMER ENHANCEMENT --- */
/* Targets the "Going Live In" label, time numbers, and unit labels. */

/* Styling for the "Going Live In" text (using common label classes) */
.countdown-label, .countdown__label, .countdown-text, .countdown__header {
    font-size: 1.8rem; /* Enlarged size for prominence */
    font-weight: 600; /* Bold but not as heavy as the numbers */
    color: #7A134A; /* Branded dark red/plum color */
    margin-bottom: 15px; /* Add space below the text */
    display: block;
    text-transform: unset; /* Reverts text transformation for consistency */
}

/* Styling for the countdown numbers (using the class you provided) */
.countdown__time {
    font-size: 3rem; /* REDUCED SIZE: 3rem */
    font-weight: 800; /* Extra bold for prominence */
    color: #7A134A; /* BRANDED DARK RED/PLUM COLOR */
    margin-right: 15px; /* Added spacing between numbers */
    padding: 0 5px;
    display: inline-block;
}

/* Styling for the unit labels (Days, Hours, Minutes, Seconds) */
/* Using robust selectors in case the component injects the labels differently */
.countdown__unit, .countdown__time-label, .countdown__time div, .countdown__time span {
    font-size: 1.6rem; /* INCREASED SIZE: More prominent unit size */
    font-weight: 500;
    color: #333333; /* Consistent with standard body text color */
    display: block; /* Forces the label onto a new line below the number */
    margin-top: 5px;
}
}
#fw-section-video-6fc248b7-33d7-4414-8569-4eecf160a2b1 {

/*
 * CSS to apply borders and styling to image elements.
 * This targets native <img> tags, such as those used for product images or social media previews.
 * * The border color has been updated to Silver (#C0C0C0).
 * * The border thickness has been reduced to 2px for a more subtle, professional look.
 * * NOTE: This currently targets ALL <img> tags. If you only want to target social media 
 * video previews, you would need to use a more specific class selector 
 * (e.g., .tiktok-post img or .youtube-thumbnail) instead of just 'img'.
 */

img {
    /* 1. Add a solid, THIN border with the requested color SILVER */
    border: 2px solid #C0C0C0; 

    /* 2. Add rounded corners for a modern look */
    border-radius: 12px;

    /* 3. Add a softer shadow to complement the lighter silver border */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);

    /* 4. Ensure the border is outside the image's default area */
    padding: 0;
    margin: 10px;
    
    /* 5. (Optional) Set the box-sizing to manage padding/border easily */
    box-sizing: border-box; 
}

/* --- NATIVE VIDEO STYLES (e.g., Livestream Webcams) --- */
video {
    /* MOBILE-FIRST DEFAULT (Full Width) */
    width: 100%; 
    max-width: none; /* Ensure no constraint on mobile */
    margin: 0; /* Align left/full width on mobile */
    display: block; 

    /* Inherit border styles from image for consistency (Silver update) */
    border: 2px solid #C0C0C0; 
    border-radius: 12px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    object-fit: cover; /* Ensures video fills the space and avoids black bars */
}

/* DESKTOP/TABLET VIEW: Apply reduced size and centering (over 768px wide) */
@media (min-width: 768px) {
    video {
        /* Reduces the video size to roughly half screen width on large displays, and centers it. */
        width: 80%; /* Use 80% of container width for responsive padding */
        max-width: 500px; /* Constrains size on desktop to be about half screen width */
        margin: 0 auto; /* Centers the video horizontally */
    }
}/* ======================================= */
/* --- ANNOUNCEMENT BAR COUNTDOWN SIZE --- */
/* ======================================= */

/* === DESKTOP SIZES === */

/* Targets the NUMBERS */
:host .countdown__time,
:host .time,
:host .number {
  font-size: 4.5rem !important; /* Adjust this desktop size */
}

/* Targets the LABELS */
:host .countdown-label,
:host .label,
:host .text {
  font-size: 0.9rem !important; /* Adjust this desktop size */
}

/* === MOBILE SIZES === */
@media (max-width: 600px) {
  
  /* Targets the NUMBERS on mobile */
  :host .countdown__time,
  :host .time,
  :host .number {
    font-size: 1.8rem !important; /* Adjust this mobile size */
  }

  /* Targets the LABELS on mobile */
  :host .countdown-label,
  :host .label,
  :host .text {
    font-size: 0.75rem !important; /* Adjust this mobile size */
  }
}
}